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“网 站 开发 案例 课堂 ”系列 图 书 是 专门 为 办 公 技 能 和 网 页 设计 初学 者 量 身 定制 的 一 套 学 
习 用 书 ， 涵 盖 网 页 设计 、 网 站 开发 、 数 据 库 设 计 等 方面 。 整 套 书 具 有 以 下 特点 。 
1. 应 用 前 沿 科技 
无 论 是 网 站 建设 、 数 据 库 设 计 还 是 HTML5、CSS3、JavaScript， 我 们 都 精 选 较为 前 沿 或 
者 用 户 群 较 大 的 领域 推进 ， 帮 助 大 家 认识 和 了 解 最 新 动态 。 

2. 权威 的 作者 团队 


组 织 国家 重点 实验 室 和 资深 应 用 专家 联手 编著 本 系列 图 书 ， 融 合 丰富 的 教学 经 验 与 优秀 
的 管理 理念 。 


3. 学 习 型 案例 设计 


以 技术 的 实际 应 用 过 程 为 主线 ， 全 程 采用 图 解 和 同步 多 媒体 结合 的 教学 方式 ， 生 动 、 直 
观 、 全 面 地 剖析 使 用 过 程 中 的 各 种 应 用 技能 ， 降 低 难度 以 提升 学 习 效率 。 


为 什么 要 写 这 样 一 本 书 


随 着 网 络 的 发 展 ， 很 多 企 事业 单位 和 广大 网 民 对 于 建立 网 站 的 需求 越 来 越 强 烈 ， 另 外 
对 于 大 中 专 院 校 ， 很 多 学 生 需 要 做 网 站 毕业 设计 ， 但 是 这 些 读者 又 不 懂 网 页 代码 程序 ， 不 知 
道 从 哪里 下 手 ， 针 对 这 些 情况 ， 我 们 编写 了 此 书 ， 以 期 全 面 带领 读者 学 习 网 页 设计 和 网 站 建 
设 的 知识 。 通 过 本 书 的 实 训 ， 读 者 可 以 很 快 地 上 手 设计 网 页 和 开发 网 站 ， 提 高 职业 化 能 力 ， 
从 而 帮助 解决 公司 与 求职 者 的 双重 需求 问题 。 


本 书 特 色 


1. 零 基础 、 入 门 级 的 讲解 
无 论 您 是 否 从 事 计 算 机 相关 行业 ， 无 论 您 是 否 接触 过 JavaScript + jQuery 动态 网 页 设计 ， 
都 能 从 本 书 中 找到 最 佳 起 点 。 


2. 超 多 、 实 用 、 专 业 的 范例 和 项 目 

本 书 在 编排 上 紧密 结合 深入 学 习 网 页 制作 技术 的 先后 过 程 ， 从 JavaScript 的 基本 概念 开 
始 ， 逐 步 带 领 大 家 深入 学 习 各 种 应 用 技巧 ， 侧 重 实战 技能 ， 使 用 简单 易 懂 的 实际 案例 进行 分 
析 和 操作 指导 ， 让 读者 读 起 来 简明 轻松 ， 操 作 起 来 有 章 可 循 。 

3. 随时 检测 自己 的 学 习 成 果 

大 部 分 章 后 面 都 设置 了 “疑难 解 惑 ” 板 块 ， 从 而 帮助 读者 解决 自学 过 程 中 最 常见 的 疑难 
问题 。 
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4. 细致 入 微 、 贴 心 提示 


本 书 在 讲解 过 程 中 ， 各 章 使 用 了 “注意 ”“ 提 示 ”“ 技 巧 ” 等 小 贴 士 ， 使 读者 在 学 习 过 
程 中 更 清楚 地 了 解 相 关 操 作 、 理 解 相关 概念 ， 并 轻松 掌握 各 种 操作 技巧 。 


5. 专业 创作 团队 和 技术 支持 


本 书 由 千 谷 高 新 教育 中 心 编 著 和 提供 技术 支持 。 
您 在 学 习 过 程 中 遇 到 任何 问题 ， 均 可 加 入 QQ 群 (案例 课堂 VIP， 号 码 为 451102631) 进 行 
提问 ， 专 家 人 员 会 在 线 答疑 。 


超 值 资源 大 放送 


1. 全 程 同步 教学 录像 


涵盖 本 书 所 有 知识 点 ， 详 细 讲解 每 个 案例 及 项 目的 过 程 和 技术 关键 点 。 比 看 书 更 能 轻松 
地 掌握 书 中 所 有 动态 网 站 开发 的 知识 ， 而 且 扩展 的 讲解 部 分 会 使 您 得 到 更 多 的 收获 。 


2. 超 多 容量 王牌 资源 


赠送 大 量 王牌 资源 ， 包 括 本 书 实例 源 代码 、 教 学 幻灯 片 、 精 品 教学 视 
频 、88 个 实用 类 网 页 模板 、12 部 网 页 开发 必 备 参考 手册 、11 个 精彩 国 所 涪 
JavaScript 案例 、Dreamweaver CC 快捷 键 速 查 手册 、HTML 标记 速 查 表 、 st 
精彩 网 站 配色 方案 赏析 、 网 页 样式 与 布局 案例 赏析 、CSS+Div 布局 赏析 案 总 
例 、Web 前 端 工程 师 常见 面试 题 等 。 读 者 可 以 通过 QQ 群 (案例 课堂 VIP， 
号 码 为 451102631) 获 取 赠 送 资源 ， 也 可 以 扫描 二 维 码 ， 下 载 本 书 资源 。 


读者 对 象 


(1) 没有 任何 网 页 设计 基础 的 初学 者 。 

(2) 有 一 定 的 Dreamweaver CC 基础 ， 想 精通 Dreamweaver CC 动态 网 站 开发 的 人 员 。 
(3) 有 一 定 的 Dreamweaver CC 网 页 设计 基础 ， 没 有 项 目 经 验 的 人 员 。 

(4) 正在 进行 毕业 设计 的 学 生 。 

(5) 大 专 院 校 及 培训 学 校 的 教师 和 学 生 。 


创作 团队 


本 书 由 刘 春 茂 编著 ， 参 加 编写 的 人 员 还 有 刘 玉 萍 、 张 金 伟 、 蒲 娟 、 周 佳 、 付 红 、 李 园 、 
郭 广 新 、 侯 永 岗 、 王 攀登 、 刘 海松 、 孙 若 淞 、 王 月 娇 、 包 慧 利 、 陈 伟 光 、 胡 同 夫 、 王 伟 、 展 
娜 娜 、 李 琪 、 梁 云 梁 和 周 浩 浩 。 在 编写 过 程 中 ， 我 们 竭尽 所 能 地 将 最 好 的 讲解 呈现 给 读者 ， 
但 也 难免 有 玻 漏 和 不 妥 之 处 ， 敬 请 读者 不 音 指 正 。 若 您 在 学 习 中 遇 到 困难 或 疑问 或 有 何 建 
议 ， 可 发 送 邮件 至 信箱 357975357@qq.com。 
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3 第 1 章 开启 网 页 设计 之 路 一 一 网 页 设计 与 网 站 建设 
基础 

和 第 2 章 整体 把 握 网 站 结构 一 一 网 站 配色 与 布局 

和 第 3 章 磨 刀 不 误 砍 柴 工 一 一 使 用 Dreamweaver CC 
创建 站 点 


第 1 章 
开启 网 页 设计 之 路 


一 一 网 页 设计 与 
网 站 建设 基础 


随 着 互联 网 的 迅速 推广 ， 越 来 越 多 的 企业 和 个 人 得 益 于 网 络 的 发 展 和 壮大 ， 越 
来 越 多 的 网 站 也 如 雨后春笋 般 纷 纷 涌现 ， 但 是 人 们 越 来 越 不 满足 于 只 有 文字 和 图 片 
的 静态 网 页 效果 ， 所 以 动态 网 站 的 开发 越 来 越 占据 网 站 开发 的 主流 。 

其 实 动态 网 站 的 开发 与 制作 并 不 难 ， 用 户 只 要 掌握 网 站 开发 工具 的 用 法 ， 了 解 
网 站 开发 的 流程 和 相关 技术 ， 再 加 上 自己 的 想象 力 ， 就 可 以 创造 出 动态 网 站 。 本 章 
就 先 来 介绍 网 页 设计 与 网 站 建设 的 基础 知识 ， 如 网 页 和 网 站 的 基本 概念 与 区 别 、 网 
页 的 HTML 构成 以 及 HTML 中 的 常用 标记 等 。 
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1.1 认识 网 页 和 网 站 


在 创建 网 站 之 前 ， 首 先 需要 认识 什么 是 网 页 、 什 么 是 网 站 以 及 网 站 的 种 类 与 特点 。 本 节 
就 来 介绍 一 下 它们 的 相关 概念 。 


1.1.1 网 页 的 概念 


SS 网 页 是 Internet( 国 际 互 联网 ， 也 称 因特网 ) 中 最 基本 的 信息 单位 ， 是 把 文字 、 图 形 、 声 音 
NN 及 动画 等 各 种 多 媒体 信息 相互 链接 起 来 而 构成 的 一 种 信息 表达 方式 。 














通常 ， 网 页 中 有 文字 和 图 像 等 基本 信息 ， 有 些 网 页 中 还 有 声音 、 动 画 和 视频 等 多 媒体 内 
容 。 网 页 一 般 由 站 标 、 导 航 栏 、 广 告 栏 、 信 息 区 和 版 权 区 等 部 分 组 成 ， 如 图 1-1 所 示 。 

在 访问 一 个 网 站 时 ， 首 先 看 到 的 网 页 一 般 称 为 该 网 站 的 首页 。 有 些 网 站 的 首页 只 是 网 站 
的 开场 页 ， 具 有 欢迎 访问 者 的 作用 ， 单 击 页 面 上 的 文字 或 图 片 ， 可 打开 网 站 的 主页 ， 此 时 首 
页 随 之 关闭 ， 如 图 1-2 所 示 。 














图 1-1 网 站 的 网 页 图 1-2 网 站 的 主页 
网 站 主页 与 首页 的 区 别 在 于 : 主页 设 有 网 站 的 导航 栏 ， 是 所 有 网 页 的 链接 中 心 。 但 多 数 


网 站 的 首页 与 主页 通常 合 为 一 个 页 面 ， 即 省 略 了 首页 而 直接 显示 主页 。 在 这 种 情况 下 ， 它 们 
指 的 是 同一 个 页 面 ， 如 图 1-3 所 示 。 














1-3 省略 首页 的 网 站 


| 


1.1.2 ”网 站 的 概念 


网 站 就 是 在 Intemet 上 通过 超级 链接 的 形式 构成 的 相关 网 页 的 集合 。 简 单 地 说 ， 网 站 是 一 
种 通信 工具 ， 人 们 可 以 通过 网 页 浏览 器 来 访问 网 站 ， 获 取 自 己 需要 的 资源 或 享受 网 络 提供 的 
服务 。 
例如 ， 人 们 可 以 通过 淘宝 网 站 查找 自己 需要 的 信息 ， 如 图 1-4 所 示 。 
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1-4 淘宝 网 网 站 


1.1.3 网 站 的 种 类 和 特点 


按照 内 容 和 形式 的 不 同 ， 网 站 可 以 分 为 门户 网 站 、 职 能 网 站 、 专 业 网 站 和 个 人 网 站 四 大 类 。 
1. 门户 网 站 


门户 网 站 是 指 涉及 领域 非常 广泛 的 综合 性 网 站 。 例 如 ， 国 内 著名 的 三 大 门户 网 站 ， 如 网 
易 、 搜 狐 和 新 浪 。 图 1-5 所 示 为 网 易 网 站 的 首页 。 


2. 职能 网 站 


职能 网 站 是 指 一 些 公 司 为 展示 其 产品 或 对 其 所 提供 的 售后 服务 进行 说 明 而 建立 的 网 站 。 
图 1-6 所 示 为 联想 集团 的 中 文官 方 网 站 。 
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1-5 ”门户 网 站 示例 1-6 ”职能 网 站 示例 
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3. 专业 网 站 


专业 网 站 是 指 专 门 以 某 个 主题 为 内 容 而 建立 的 网 站 ， 这 种 网 站 都 是 以 某 一 题材 的 信息 作 
为 网 站 的 内 容 。 图 1-7 所 示 为 赶集 网 网 站 ， 该 网 站 主要 为 用 户 提供 租房 、 二 手 货 交 易 等 同城 
相关 服务 。 

4. 个 人 网 站 


个 人 网 站 是 指 由 个 人 开发 建立 的 网 站 ， 在 内 容 和 形式 上 具有 很 强 的 个 性 化 ， 通 常用 来 宣 

传 自己 或 展示 个 人 的 兴趣 爱好 。 如 现在 比较 流行 的 淘宝 网 ， 在 淘宝 网 上 注册 一 个 账户 ， 开 一 

家 自己 的 小 店 ， 在 一 定 程度 上 就 宣传 了 自己 ， 展 示 了 个 人 兴趣 与 爱好 ， 如 图 1-8 所 示 。 
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图 1-7 专业 网 站 示例 图 1-8 个 人 网 站 示例 


1.2 ”网 页 的 相关 概念 


在 制作 网 页 时 ， 经 常会 接触 到 很 多 和 网 络 有 关 的 概念 ， 如 浏览 器 、URL、FTP、IP 地 址 
及 域名 等 ， 理 解 与 网 页 相关 的 概念 ， 对 制作 网 页 会 有 一 定 的 帮助 。 


1.2.1 因特网 与 万 维 网 


因特网 (Interneb 又 称 为 国际 互联 网 ， 是 一 个 把 分 布 于 世界 各 地 的 计算 机 用 传输 介质 互相 
连接 起 来 的 网 络 。Internet 主要 提供 的 服务 有 万 维 网 WWW)、 文 件 传输 协议 (FTP)、 电 子 邮 件 (E-mail) 
及 远程 登录 (Telneb 等 。 

万 维 网 (World Wide Web，WWW) 简 称 为 3W， 它 是 无 数 个 网 络 站 点 和 网 页 的 集合 ， 也 是 
Internet 提供 的 最 主要 的 服务 。 它 是 由 多 媒体 链接 而 形成 的 集合 ， 通 常 上 网 看 到 的 内 容 就 是 万 
维 网 的 内 容 。 图 1-9 所 示 为 使 用 万 维 网 打开 的 百度 首页 。 














1.2.2 ”浏览 器 与 HTML 
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浏览 器 是 将 互联 网 上 的 文本 文档 (或 其 他 类 型 的 文件 ) 翻 译 成 网 页 ， 并 让 用 户 与 这 些 文件 交 SS 
互 的 一 种 软件 工具 ， 主 要 用 于 查看 网 页 的 内 容 。 目 前 最 常用 的 浏览 器 有 两 种 : 美国 微软 公司 
的 Internet Explorer( 通 常 称 为 正 浏览 器 ); 美国 网 景 公 司 的 Netscape Navigator( 通 常 称 为 网 景 浏 
览 器 )。 图 1-10 所 示 为 使 用 正 浏览 器 打开 的 页 面 。 

HTML(HyperText Marked Language， 超 文本 标记 语言 ) 是 一 种 用 来 制作 超 文 本 文档 的 简单 
标记 语言 ， 也 是 制作 网 页 的 最 基本 的 语言 ， 它 可 以 直接 由 浏览 器 执行 。 1-11 所 示 为 使 用 
HTML 语言 制作 的 页 面 。 
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图 1-10 使 用 IE 浏览 器 打开 的 页 面 1-11 使 用 HTML 语言 制作 的 页 面 


1.2.3” URL、 域 名 与 IP 地 址 


URL(Uniform Resource Locator， 统 一 资源 定位 器 ) 是 指 网 络 地 址 ， 是 在 Intermet 上 用 来 描 
述 信息 资源 ， 并 将 Internet 提供 的 服务 统一 编 址 的 系统 。 简 单 来 说 ， 通 常 在 下 浏览 器 或 
Netscape 浏览 器 中 输入 的 网 址 就 是 URL 的 一 种 ， 如 百度 网 址 http://www.baidu.com。 

域名 (Domain Name) 类 似 于 Intemet 上 的 门牌 号 ， 是 用 于 识别 和 定位 互联 网 上 计算 机 的 层 
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次 结构 的 字符 标识 ， cade Let lade ise 但 相对 于 IP 地 址 而 言 ， 域 名 
更 便于 使 用 者 理解 和 记忆 。URL 和 域名 是 两 个 不 同 的 概念 ， 如 http://www.sohu.com/ 是 URL， 
而 www.sohu.com 是 域名 ， 如 图 1-12 所 示 。 
IP(Internet Protocol， 因 特 网 协议 ) 是 为 计算 机 网 络 相互 连接 进行 通信 而 设计 的 协议 ， 是 计 
算 机 在 因特网 上 进行 相互 通信 时 应 当 遵守 的 规则 。JIP 地 址 是 给 因特网 上 的 每 台 计算 机 和 其 他 
设备 分 配 的 一 个 唯一 的 地 址 。 使 用 ipconfig 命令 可 以 查看 本 机 的 也 地 址 ， 如 图 1-13 所 示 。 
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图 1-12 搜狐 首页 图 1-13 使 用 ipconfig 命令 查看 IP 地 址 


1.2.4 上 传 和 下 载 


上 传 (Upload) 是 从 本 地 计算 机 (一 般 称 客户 端 ) 向 远程 服务 器 (一 般 称 服务 器 端 ) 传 送 数据 的 
行为 和 过 程 。 下 载 (Download) 是 从 远程 服务 器 取 回 数据 到 本 地 计算 机 的 过 程 。 


1.3 网 页 的 HTML 构成 


在 一 个 HTML 文档 中 ， 必 须 包含 <HTML></HTML> 标 记 (也 称 标签 )， 并 且 该 标记 需 放 在 
-个 HTML 文档 的 开始 位 置 和 结束 位 置 ， 即 每 个 文档 以 <HTML> 开 始 、 以 </HTML> 结 束 。 
<HIML> 与 </HTML> 之 间 通 常 包 含 两 个 部 分 ， 分 别 是 <HEAD></HEAD> 标 记 和 <BODY> 
</BODY> 标 记 。HEAD 标记 包含 HTML 头 部 信息 ， 如 文档 标题 、 样 式 定义 等 。BODY 标记 包 
含 文档 主体 部 分 ， 即 网 页 内 容 。 需 要 注意 的 是 ，HTML 标记 不 区 分 大 小 写 。 
为 了 便于 读者 从 整体 上 把 握 HTML 文档 结构 ， 下 面 通过 一 个 HTML 页 面 来 介绍 HTML 
页 面 的 整体 结构 ， 示 例 代码 如 下 : 
<!IDOCTYPE HTML> 
<HTML> 
<HEAD> 
<TITLE> 网 页 标题 </TITLE> 
</HEAD> 
<BODY> 
网 页 内 容 
</BODY> 
</HTML> 


从 上 述 代码 可 以 看 出 ， 一 个 基本 的 HTML 页 由 以 下 几 个 部 分 构成 。 

(1) <!DOCTYPE> 声 明 必 须 位 于 HTMLS5 文档 中 的 第 一 行 ， 也 就 是 位 于 <HTMIL> 标 记 之 
前 。 该 标记 用 于 告知 浏览 器 文档 所 使 用 的 HTML 规范 。<!DOCTYPE> 声 明 不 属于 HTML 标 
记 ， 而 是 一 条 指令 ， 告 诉 浏览 器 编写 页 面 所 用 的 标记 的 版 本 。 由 于 HTML5 版 本 还 没有 得 到 
浏览 器 的 完全 认可 ， 后 面 介绍 时 还 采用 以 前 通用 的 标准 。 

(2) <HITML> 和 </HTML> 说 明 本 页 面 是 使 用 HTML 语言 编写 的 ， 可 使 浏览 器 软件 准确 无 
误 地 解释 、 显 示 。 

(3) <HEAD> 和 </HEAD> 是 HTML 的 头 部 标记 ， 头 部 信息 不 显示 在 网 页 中 。 在 该 标记 内 
可 以 嵌 套 其 他 标记 ， 用 于 说 明文 件 标题 和 整个 文件 的 一 些 公用 属性 ， 如 通过 <STYLE> 标 记 定 
义 CSS 样式 表 ， 通 过 <SCRIPT> 标 记 定义 JavaScript 脚本 文件 。 

(4) <TITLE> 和 </TITLE> 标 记 是 HEAD 中 的 重要 组 成 部 分 ， 它 包含 的 内 容 显 示 在 浏览 器 
的 窗口 标题 栏 中 。 如 果 没 有 TITLE， 浏 览 器 标题 栏 就 只 显示 本 页 的 文件 名 。 

(5) <BODY> 和 </BODY> 标 记 用 来 包含 HTML 页 面 显示 在 浏览 器 窗口 的 客户 区 中 的 实际 
内 容 。 例 如 ， 页 面 中 的 文字 、 图 像 、 动 画 、 超 链接 以 及 其 他 与 HTML 相关 的 内 容 都 是 在 该 标 
记 中 定义 的 。 


1.3.1 文档 标记 


一 般 HTML 的 页 面 以 <HTML> 标 记 开 始 ， 以 </HTML> 标 记 结束 。HTML 文档 中 的 所 有 内 
容 都 应 位 于 这 两 个 标记 之 间 。 如 果 这 两 个 标记 之 间 没 有 内 容 ， 则 该 HTML 文档 在 IE 浏览 器 
中 的 显示 将 是 空白 的 。 

<HTMIL> 标 记 的 语法 格式 如 下 : 


<HTML> 





</HTML> 
1.3.2 头 部 标记 


头 部 标记 (<HEAD>…</HEAD>) 包 含 的 是 文档 的 标题 信息 ， 如 标题 、 关 键 字 、 说 明 及 样式 
等 。 除 了 <TITLE> 标 题 外 ， 一 般 位 于 头 部 标记 中 的 内 容 不 会 直接 显示 在 浏览 器 中 ， 而 是 通过 
其 他 的 方式 显示 。 

(1) 内 容 。 

头 部 标记 中 可 以 嵌 套 多 个 标记 ， 如 <TITLE>、<BASE>、<ISINDEX> 和 <SCRIPT> 等 标 
记 ， 也 可 以 添加 任意 数量 的 属性 ， 如 <STYLE>、<META> 或 <OBJECT> 等 。 除 了 <TITLE> 标 
记 外 ， 媒 入 的 其 他 标记 可 以 使 用 多 个 。 

(2) 位 置 。 

在 所 有 的 HTML 文档 中 ， 头 部 标记 不 可 或 缺 ， 但 是 其 起 始 标记 和 结尾 标记 却 可 以 省 去 。 
在 各 个 HTML 的 版 本 文档 中 ， 头 部 标记 一 直 紧 跟 <BODY> 标 记 ， 但 在 框架 设置 文档 中 ， 其 后 
跟 的 是 <FRAMESET> 标 记 。 
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G3) 属性 。 
<HEAD> 标 记 的 属性 PROFILE 给 出 了 元 数据 描写 的 位 置 ， 从 中 可 以 看 到 其 中 的 <META> 
和 <LINK> 元 素 的 特性 。 该 属性 的 形式 没有 严格 的 格式 规定 。 


1.3.3 ”主体 标记 


主体 标记 (<BODY>…</BODY>) 包 含 了 文档 的 内 容 ， 用 若干 个 属性 来 规定 文档 中 显示 的 
背景 和 颜色 。 
主体 标记 可 能 用 到 的 属性 如 下 。 
(1) BACKGROUND=URL( 文 档 的 背景 图 像 ，URL 指 图 像 文件 的 路 径 )。 
NN (2) BGCOLOR=Color( 文 档 的 背景 色 )。 
(3) TEXT=Color( 文 本 颜色 )。 
(4) LINK=Color( 链 接 颜色 )。 
(5) VLINK=Color( 已 访问 的 链接 颜色 )。 
(6) ALINK=Color( 被 选中 的 链接 颜色 )。 
(7) ONLOAD=Script( 文 档 已 被 加 载 )。 
(8) ONUNLOAD=Script( 文 档 已 退出 )。 
为 该 标记 添加 属性 的 代码 格式 如 下 : 


<BODY BACKGROUNE="URI" BGCOLOR="Color"> 


ER 
1.4 ”HTML 的 常用 标记 


HTML 文档 是 由 标记 组 成 的 文档 ， 要 熟练 掌握 HTML 文档 的 编写 ， 就 要 先 了 解 HTML 的 
常用 标记 。 


1.4.1 标题 标记 


在 HTML 文档 中 ， 文 本 的 结构 除了 以 行 和 段 的 形式 出 现 之 外 ， 还 可 以 标题 的 形式 存在 。 
通常 一 篇 文档 最 基本 的 结构 ， 就 是 由 若干 不 同 级 别 的 标题 和 正文 组 成 的 。 

HTML 文档 中 包含 有 各 种 级 别 的 标题 ， 各 种 级 别 的 标题 由 元 素 <h1> 到 <h6> 来 定义 ， 其 中 
<hl> 代 表 1 级 标题 ， 级 别 最 高 ， 字 号 也 最 大 ， 其 他 标题 元 素 依 次 递减 ，<h6> 级 别 最 低 。 

下 面具 体 介 绍 标题 的 使 用 方法 。 

【 例 1-1】 标题 标记 的 使 用 (实例 文件 为 sh0l\1.1.htmD。 具 体 代码 如 下 : 


<html> 

<head> 
<title> 文 本 段 换 行 </title> 
</head> 

<body> 

<h1> 这 里 是 1 级 标题 </h1> 


<h2> 这 里 是 2 级 标题 </h2> 
<h3> 这 里 是 3 级 标题 </h3> 
<h4> 这 里 是 4 级 标题 </h4> 
<h5> 这 里 是 5 级 标题 </h5> 
<h6> 这 里 是 6 级 标题 </h6> 
</body> 

</html> 


将 上 述 代码 输入 到 记事 本 文件 ( 即 运行 【记事 本 】 程 序 打开 的 文档 ) 中 ， 并 以 后 级 名 为 .html 
的 格式 保存 后 ， 可 在 正 浏览 器 中 预览 效果 ， 效 果 如 图 1-14 所 示 。 


ET 
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1-14 “标题 标记 的 使 用 效果 
1.4.2 段落 标记 


段落 标记 <p> 用 来 定义 网 页 中 的 一 段 文本 ， 文 本 在 一 个 段落 中 会 自动 换行 。 段 落 标记 是 双 
标记 ， 即 <p> 和 </p>， 在 开始 标记 <p> 和 结束 标记 </p> 之 间 的 内 容 形成 一 个 段落 。 如 果 省 略 掉 
结束 标记 ， 从 <p> 标 记 开始 ， 那 么 直到 在 下 一 个 段落 标记 出 现 之 前 的 文本 ， 都 将 被 默认 为 同一 
段 段落 内 。 段 落 标记 中 的 p 是 指 英文 单词 paragraph( 即 “段落 ”) 的 首 字 母 。 

下 面具 体 介绍 段落 标记 的 使 用 方法 。 

【 例 1-2】 段落 标记 的 使 用 (实例 文件 为 ch0l\1.2.html)。 有 具体 代码 如 下 : 


<html> 

<head> 

<title> 段 落 标 记 的 使 用 </title> 

</head> 

<body> 

<p> 白 雪 公 主 与 七 个 小 矮人 !</p> 

<p> 很 久 以 前 ， 白 雪 公 主 的 后 母 一 王后 美貌 盖世 ， 但 魔 镜 却 告诉 她 世上 唯 有 白雪 公主 最 漂亮 。 王 后 怒 
火 中 烧 派 武 士 把 她 押送 到 森林 准备 谋害 ， 武 士 很 同情 白雪 公主 让 她 逃 往 森林 深 处 。 

</p> 

<p> 

小 动物 们 用 善良 的 心 抚慰 她 ， 鸟 曾 们 还 把 她 领 到 一 间 小 屋 中 ， 全 人 人 房子 的 主人 
是 在 外 边 开 矿 的 七 个 小 矮人 ， 他 们 听 了 白雪 公主 的 诉说 后 把 她 留 在 家 中 

</p> 

<p> 

王后 得 知 白雪 公主 未 死 ， 便 用 魔 镜 把 自己 变 成 一 个 老太婆 ， 来 到 密林 深 处 ， 哄 骗 白 雪 公 主 吃 下 一 只 有 毒 
的 苹果 ， 使 公主 昏 死 过 去 。 鸟 儿 识 破 了 王后 的 伪装 ， 飞 到 矿山 向 小 矮人 报告 了 白雪 公主 的 不 幸 。 七 个 小 
矮人 火速 赶 回 ， 王 后 仓皇 逃跑 ， 在 狂风 暴雨 中 跌 下 山 岸 摔 死 。 

</p> 

<p> 
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七 个 小 矮人 悲痛 万 分 ， 把 白雪 公主 安放 在 一 只 水 唱 棺 里 日 日 夜 夜 守护 着 她 。 邻 国 的 王子 闻 讯 ， 骑 着 白马 


赶 来 ， 爱 情 之 吻 使 白雪 公主 死 而 复生 。 然 后 王子 带 着 白雪 公主 骑 上 白马 ， 


动物 ， 到 王子 的 宫殿 中 开始 了 幸福 的 生活 。 
</p> 

</body> 

</html> 


告别 了 七 个 小 矮人 和 森林 中 的 


将 上 述 代码 输入 到 记事 本 文件 中 ， 并 以 后 级 名 为 .html 的 格式 保存 ， 然 后 在 正 浏览 器 中 
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图 1-15 段落 标记 的 使 用 效果 


1.4.3 ”换行 标记 


使 用 换行 标记 <br> 可 以 给 一 段 文 字 换 行 。 该 标记 是 一 个 单 标记 ， 
文 单词 break 的 缩写 ， 作 用 是 将 文字 在 一 个 段 内 强制 换行 。 一 个 <br> 标 记 代 表 一 次 换行 ， 连 续 
的 多 个 标记 可 以 实现 多 次 换行 。 使 用 换行 标记 时 ， 在 需要 换行 的 位 置 添加 <br> 标 记 即 可 。 


下 面具 体 介绍 换行 标记 的 使 用 方法 。 


预览 效果 ， 如 图 1-15 所 示 ， 可 以 看 出 <p> 标 记 将 文本 分 成 了 4 个 段落 。 


它 没有 结束 标记 ， 是 英 


【 例 1-3】 换行 标记 的 使 用 (实例 文件 为 ch01\1.3.html)。 有 具体 代 码 如 下 : 


<html> 

<head> 
<title> 文 本 段 换 行 </title> 
</head> 

<body> 

清明 <br/> 

清明 时 节 雨 纷纷 <br/> 
路 上 行人 和 欲 断 魂 <br/> 
借 问 酒家 何 处 有 <br/> 
牧童 遥 指 可 花村 
</body> 

</html> 


将 上 述 代 码 输入 到 记事 本 文件 中 ， 并 以 后 级 名 为 .html 的 格 


式 保存 ， 然 后 在 IE 浏览 器 中 预览 效果 ， 如 图 1-16 所 示 。 
1.4.4 ”链接 标记 


链接 标记 <a> 是 网 页 中 最 为 常用 的 标记 ， 主 要 用 于 把 页 面 中 


的 文本 或 图 片 链接 到 其 他 的 页 面 、 文 本 或 图 片 。 建 立 链接 的 要 
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1-16 换行 标记 的 使 用 效果 


素 有 两 个 ， 即 可 被 设置 为 链接 的 网 页 元 素 和 链接 指向 的 目标 地 址 。 链 接 的 基本 结构 如 下 : 


<a href=URL> 网 页 元 素 </a> 
下 面具 体 介 绍 链接 标记 的 使 用 方法 。 
1. 设置 文本 和 图 片 的 链接 


可 被 设置 为 链接 的 网 页 元 素 是 指 网 页 中 通常 使 用 的 文本 和 图 片 。 文 本 链接 和 图 片 链接 通 
过 <a> 和 </a> 标 记 来 实现 ， 即 将 文本 或 图 片 放 在 <a> 开 始 标 记 和 </a> 结 束 标记 之 间 即 可 建立 文 
本 和 图 片 链接 。 

【 例 1-4】 设置 文本 和 图 片 的 链接 (实例 文件 为 chO1\1.4.html)。 打 开 记 事 本 文件 ， 在 其 中 
输入 以 下 HTML 代码 : 

<html> 

<head> 

<title> 文 本 和 图 片 链接 </title> 

</head> 

<body> 

<a href="a.html"><img src="images/Logo.gif"></a> 

<a href="b.html"> 公 司 简介 </a> 

</body> 

</html> 


代码 输入 完成 后 ， 将 其 保存 为 “链接 .html” 文 件 ， 然 后 双击 该 文件 ， 就 可 以 在 正 浏览 器 
中 查看 到 使 用 链接 标记 设置 文本 和 图 片 的 效果 了 ， 如 图 1-17 所 示 。 


2. 设置 电子 邮件 路 径 


电子 邮件 路 径 ， 即 用 来 链接 一 个 电子 邮件 的 地 址 。 其 写法 如 下 : 
mailto: 邮 件 地 址 


【 例 1-5】 设置 电子 邮件 路 径 ( 实 例文 件 为 ch0l\1.5.htmD。 打 开 记 事 本 文件 ， 在 其 中 输入 
以 下 HTML 代码 : 


<html> 

<head> 

<title> 电 子 邮件 路 径 </title> 

</head> 

<body> 

使 用 电子 邮件 路 径 : <a href="mailto:1iule2012@163.com"> 链 接 </a> 
</body> 

</html> 


代码 输入 完成 后 ， 将 其 保存 为 “电子 邮件 链接 .html” 文 件 ， 然 后 双击 该 文件 ， 就 可 以 在 
下 浏览 器 中 查看 到 使 用 链接 标记 设置 电子 邮件 路 径 的 效果 了 。 当 单 击 含有 链接 的 文本 时 ， 会 
弹出 一 个 发 送 邮件 的 对 话 框 ， 显 示 效 果 如 图 1-18 所 示 。 
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1.4.5 ”列表 标记 


文字 列表 可 以 有 序 地 编排 一 些 信息 资源 ， 使 其 结构 化 和 条 理化 ， 并 以 列表 的 样式 显示 出 
来 ， 以 便 浏览 者 能 更 加 快捷 地 获得 相应 信息 。HTML 中 的 文字 列表 如 同文 字 编辑 软件 Word 
中 的 项 目 符号 和 自动 编号 。 


1. 建立 无 序列 表 


无 序列 表 相 当 于 Word 中 的 项 目 符号 ， 无 序列 表 的 项 目 排列 没有 顺序 ， 只 以 符号 作为 分 
项 标识 。 无 序列 表 的 建立 使 用 的 是 一 对 标记 <ul> 和 </ul>， 其 中 每 一 个 列表 项 的 建立 还 要 一 对 
标记 <l> 和 </i>。 其 结构 如 下 : 


<ul> 
<1i> 无 序列 表 项 </1i> 
<1i> 无 序列 表 项 </1i> 
<1i> 无 序列 表 项 </1i> 
<1i> 无 序列 表 项 </1i> 


</ul> 


在 无 序列 表 结构 中 ， 使 用 <ul> 和 </ul> 标 记 表 示 该 无 序列 表 的 开始 和 结束 ，<li> 则 表示 该 
列表 项 的 开始 。 在 一 个 无 序列 表 中 可 以 包含 多 个 列表 项 ， 并 且 <li> 的 结束 标记 可 以 省 略 。 

下 面 实例 介绍 了 使 用 无 序列 表 实 现 文本 的 排列 显示 。 

【 例 1-6】 建立 无 序列 表 (实例 文件 为 ch01\1.6.html)。 打 开 记 事 本 文件 ， 在 其 中 输入 以 下 
HTML 代码 : 


<html> 
<head> 
<title> 嵌 套 无 序列 表 的 使 用 </title> 
</head> 
<body> 
<h1> 网 站 建设 流程 </h1> 
<ul> 
<1i> 项 目 需 求 </1i> 
<1i> 系统 分 析 


<ul> 


<1i> 网 站 的 定位 </1i> 
<1i> 内 容 收集 </1i> 
<1i> 栏 目 规划 </1i> 
<1i> 网 站 目录 结构 设计 </1i> 
<1i> 网 站 标志 设计 </1i> 
<1i> 网 站 风格 设计 </1i> 
<1i> 网 站 导航 系统 设计 </1i> 
</ul> 
</1i> 
<1i> 伪 网 页 草图 
<ul> 
<1i> 制 作 网 页 草图 </1i> 
<1i> 将 草图 转换 为 网 页 </1i> 
</ul> 
</1i> 
<1i> 站 点 建设 </1i> 
<1i> 网 页 布局 </1i> 
<1i> 网 站 测试 </1i> 
<1i> 站 点 的 发 布 与 站 点 管理 </1i> 
</ul> 
</body> 
</html> 


代码 输入 完成 后 ， 将 其 保存 为 “无 序列 
表 .html” 文 件 ， 然 后 双击 该 文件 ， 就 可 以 在 正 浏 
览 器 中 查看 到 使 用 列表 标记 建立 无 序列 表 的 效果 
了 ， 如 图 1-19 所 示 。 

通过 观察 发 现 ， 无 序列 表 项 中 可 以 嵌 套 一 个 列 
表 ， 如 代码 中 的 “系统 分 析 ” 列 表 项 和 “ 伪 网 页 草 
图 ”列表 项 中 都 有 下 级 列表 ， 因 此 在 这 对 <li> 和 
</i> 标 记 间 又 增加 了 一 对 <ul> 和 </ul> 标 记 。 


2. 建立 有 序列 表 


有 序列 表 类 似 于 Word 中 的 自动 编号 功能 。 有 
序列 表 的 使 用 方法 和 无 序列 表 的 使 用 方法 基本 相 


同 。 它 使 用 的 标记 是 <ol> 和 </ol>， 每 个 列表 项 前 使 用 的 标记 是 <l> 和 </li>， 且 每 个 项 目 都 有 前 
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网 站 建设 流程 








1-19 ”建立 的 无 序列 表 


后 顺序 之 分 ， 多 数 情况 下 ， 该 顺序 使 用 数字 表示 。 其 结构 如 下 : 


<ol> 
<1i> 第 1 项 </1i> 
<1i> 第 2 项 </1i> 
<1i> 第 3 项 </1i> 
</o1> 


下 面 实例 介绍 了 使 用 有 序列 表 实 现 文本 的 排列 显示 。 


【 例 1-7】 建立 有 序列 表 ( 实 例文 件 为 ch0l\1.7.htmD。 打 开 记事 本 文件 ， 在 其 中 输入 以 下 


HTML 代码 : 


<html> 
<head> 


吝 有 河池 毅 卉 到 贱 半 洒 关 到 一 霹 义 阁 池 当 到 训 六 山 1 外 全 
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<title> 有 序列 表 的 使 用 </title> 
</head> 
<body> 
<h1> 本 讲 目 标 </h1> 
<ol> 
<1i> 网 页 的 相关 概念 </1i> 
<1i> 网 页 与 HTML</1i> = 
<1i>Web 标准 (结构 、 表 现 、 行 为 ) </1i> | ET 
<1i> 网 页 设计 与 开发 的 过 程 </1i> 本 讲 目 标 
<1i> 与 设计 相关 的 技术 因素 </1i> 
<1i>HTML 简介 </1i> 1 居多 基本 和 
</o1> eb 
</body> 
</html> 


\ 代码 输入 完成 后 ， 将 其 保存 为 “有 序列 表 .html” 
文件 ， 然 后 双击 该 文件 ， 就 可 以 在 正 浏览 器 中 查看 
到 使 用 列表 标记 建立 有 序列 表 后 的 效果 了 ， 如 图 1-20 图 1-20 建立 的 有 序列 表 
所 示 。 


1.4.6 图像 标记 
图 像 可 以 美化 网 页 ， 插 入 图 像 时 可 使 用 图 像 标记 <img>。<img> 标 记 的 属性 及 描述 如 表 1-1 


Web 标 准 结构、 表现 、 行 为 ) 
网 由 设计 与 开发 的 过 程 

与 设计 相关 的 技术 因素 
HTML 简 介 





所 示 。 
表 1-1 <img> 标 记 的 属性 及 描述 

属 性 值 描 述 
alt text 定义 有 关 图 形 的 短 的 描述 
SIC URL 要 显示 的 图 像 的 URL 
height pixels % 定义 图 像 的 高 度 
ismap URL 把 图 像 定义 为 服务 器 端的 图 像 映射 

i 定义 作为 客户 端 图 像 映射 的 一 幅 图 像 。 请 参阅 <map> 和 <area> 标记 ， 了 

人 解 其 工作 原理 
Vspace pixels 定义 图 像 项 部 和 底部 的 空白 。 不 支持 。 请 使 用 CSS 代替 
width pixels % 设置 图 像 的 宽度 

1. 插入 图 片 

src 属性 用 于 指定 图 片 源 文件 的 路 径 ， 它 是 <img> 标 记 必 不 可 少 的 属性 。 其 语法 格式 如 下 : 





<img src=" 图 片 路 径 "> 

图 片 的 路 径 既 可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 径 。 

【 例 1-8】 在 网 页 中 插入 图 片 (实例 文件 为 ch0l\1.8.htmD)。 打 开 记 事 本 文件 ， 在 其 中 输入 
以 下 HTML 代码 : 





<html> 和 
<head> 国 cWserswqiangw\Dccuments\ 弄 中" 必 局 医生 让 区 
<title> 插 入 图 片 </title> 
</head> 

<body> 

<img src="images/meishi.jpg"> 
</body> 


</html> Es 
履 入 眠 
代码 输入 完成 ， 将 其 保存 为 “插入 寻 八 


图 片 .html” 文 件 ， 然 后 双击 该 文件 ， 就 
可 以 在 下 浏览 器 中 查看 到 使 用 <img> 标 
记 插 入 图 片 后 的 效果 了 ， 如 图 1-21 图 1-21 插入 图 片 的 显示 效果 
所 示 。 


2. 从 不 同位 置 插入 图 片 


在 插入 图 片 时 ， 用 户 可 以 将 其 他 文件 夹 或 服务 器 中 的 图 片 显示 到 网 页 中 。 
【 例 1-9】 从 不 同位 置 插入 图 片 (实例 文件 为 ch0l\1.9.htmD。 打 开 记事 本 文件 ， 在 其 中 输 
入 以 下 HTML 代码 : 


<html> 
<body> 


<p> 
来 自 一 个 文件 夹 的 图 像 : 

<img src="images/meishi.jpg" /> 
</p> 


<p> 
来 自 baidnu 的 图 像 : 

<img 
src="http://www.baidu.com/img/shouye 
_b5486898c692066bd2cbaeda86d74448 
.gif" /> 

</p> 

</body> 

</html> 


代码 输入 完成 后 ， 将 其 保存 为 “插入 #ewiswmee 

















以 条 入 证 好 季 好 滞 
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其 他 位 置 图 片 .html” 文 件 ， 然 后 双击 该 文 
件 ， 就 可 以 在 正 浏览 器 中 查 到 使 用 <img> 标 
记 插 入 图 像 后 的 效果 了 ， 如 图 1-22 所 示 。 
3. 设置 图 片 的 宽度 和 高 度 
在 HIML 文档 中 ， 还 可 以 任意 设置 插入 图 片 的 显示 大 小 。 设 置 图 片 尺寸 可 通过 图 片 的 属 
性 width( 宽 度 ) 和 height( 高 度 ) 来 实现 。 
【 例 1-10】 设置 图 片 在 网 页 中 的 宽度 和 高 度 (实例 文件 为 ch01\1.10.html)。 打 开 记事 本 文 
件 ， 在 其 中 输入 以 下 HTML 代码 : 


<html> 
<head> 


图 1-22 从 不 同位 置 插入 的 图 像 
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<title> 插 入 图 片 </title> 

</head> 

<body> 

<img src="images/01.jpg"> 

<img src="images/01.jpg" width="200"> 

<img src="images/01.jpg" width="200" height="300"> 


</body> 
</html> 
代码 输入 完成 后 ， 将 其 保存 为 “设置 图 
片 大 小 .html” 文 件 ， 然 后 双击 该 文件 ， 就 。 (全 国 cap Pv0] NR Ey 


可 以 在 正 浏览 器 中 查看 到 使 用 <img> 标 记 


设置 的 图 片 宽度 和 高 度 效果 了 ， 如 图 1-23 a i 
所 示 。 wy | 2 fF 

由 图 1-23 可 以 看 到 ， 图 片 的 显示 尺寸 A A 
是 由 width 和 height 控制 的 。 当 只 为 图 片 设 2 


. 二 
置 一 个 尺寸 属性 时 ， 另 一 个 尺寸 就 以 图 片 原 “攻关 
始 的 长 宽 比 例 来 显示 。 图 片 的 尺寸 单位 可 以 








选择 百分比 或 数值 。 百 分 比 为 相对 尺寸 ， 数 图 1-23 图 片 高 度 与 宽度 的 设置 效果 
值 是 绝对 尺寸 。 


SF 网 页 中 插入 的 图 像 都 是 位 图 ， 当 放大 图 片 的 尺寸 时 ， 图 片 就 会 出 现 马 赛 克 ， 变 
区 得 很 模糊 。 


Dr 在 Windows 中 查看 图 片 的 尺寸 ， 只 需 找到 图 像 文件 ， 把 鼠标 指针 移动 到 图 像 
PS 上 ， 停 留 几 秒 后 ， 就 会 出 现 一 个 提示 框 ， 显 示 出 该 图 片 文件 的 尺寸 。 尺 寸 后 显示 
的 数字 ， 代 表 的 是 图 片 的 宽度 和 高 度 ， 如 256 x 256。 


1.4.7 表格 标记 


HTML 中 的 表格 标记 有 以 下 几 个 。 
®@ <table>…</table> 标 记 : <table> 标 记 用 于 标识 一 个 表格 对 象 的 开始 ;</table> 标记 标 
识 一 个 表格 对 象 的 结束 。 一 个 表格 中 ， 只 人 允许 出 现 一 对 <table> 和 </table> 标 记 。 
e@ <tr>…</tr> 标 记 : <tr> 标 记 用 于 标识 表格 一 行 的 开始 ;</tr> 标 记 用 于 标识 表格 一 行 的 
结束 。 表 格 内 有 多 少 对 <t> 和 </t> 标 记 ， 就 表示 表格 中 有 多 少 行 。 
@ ”<td>…</td> 标 记 : <td> 标 记 用 于 标识 表格 某 行 中 的 一 个 单元 格 开 始 ; </td> 标 记 用 于 
标识 表格 某 行 中 的 一 个 单元 格 结束 。<td> 和 </td> 标 记 书 写 在 <t> 和 </t> 标 记 内 。 一 
对 <t> 和 </t> 标 记 内 有 多 少 对 <td> 和 </td> 标 记 ， 就 表示 该 行 有 多 少 个 单元 格 。 
最 基本 的 表格 必须 包含 一 对 <table> 和 </table> 标 记 、 一 对 或 几 对 <tt> 和 </tr> 标 记 以 及 一 对 
或 几 对 <td> 和 </td> 标 记 。 一 对 <table> 和 </table> 标 记 定义 一 个 表格 ， 一 对 <t> 和 </tr> 标 记 定义 
一 行 ， 一 对 <td> 和 </td> 标 记 定义 一 个 单元 格 。 
【 例 1-11】 定义 一 个 4 行 3 列 的 表格 (实例 文件 为 ch01\1.11.html)。 打 开 记 事 本 文件 ， 在 
其 中 输入 以 下 HTML 代码 。 





<html> 
<head> 
<title> 表 格 基本 结构 </title> 
</head> 
<body> 
<table border="1"> 
<tr> 
<td>R1</td> 
<td>B1</td> 
<td>C1</td> 
</tr> 
<tr> 
<td>R2</td> 
<td>B2</td> 
<td>C2</td> 
</tr> 
<tr> 
<td>R3</td> 
<td>B3</td> 
<td>C3</td> 
</tr> 
<tr> - 0 x 
<td>A4</td> 半 CAUsers\qiangu\Doc 只 ”C0 | 眉 表 个 基 本 结构 
<td>B4</td> 
<td>C4</td> 
</tr> 
</table> 
</body> 
</html> 


代码 输入 完成 后 ， 将 其 保存 为 “表格 .html” 文 
件 ， 然 后 双击 该 文件 ， 就 可 以 在 正 浏览 器 中 查看 到 四 2 肖 入 自生 汕 这 
使 用 表格 标记 插入 表格 后 的 效果 了 ， 如 图 1-24 所 示 。 


1.4.8 表单 标记 


表单 主要 用 于 收集 网 页 上 浏览 者 的 相关 信息 。 其 标记 为 <form> 和 </form>。 表 单 的 基本 语 
法 格式 如 下 : 


<form action="url" method="get|post" enctype="mime"> 
</form > 


其 中 ，action="url" 用 于 指定 处 理 提交 表单 的 格式 ， 它 可 以 是 一 个 URL 地 址 或 一 个 电子 邮 
件 地 址 。method="get | post" 用 于 指明 提交 表单 的 HTTP 方法 。enctype="mime" 用 于 指明 把 表单 
提交 给 服务 器 时 的 互联 网 媒体 形式 。 表 单 是 一 个 能 够 包含 表单 元 素 的 区 域 。 通 过 添加 不 同 的 
表单 元 素 ， 将 显示 不 同 的 效果 。 

下 面 介 绍 如 何 使 用 表单 标记 开发 一 个 简单 网 站 的 用 户 意见 反馈 页 面 。 

【 例 1-12】 开发 用 户 意 见 反馈 页 面 (实例 文件 为 ch0l\1.12.html)。 打 开 记 事 本 文件 ， 在 其 
中 输入 以 下 HTML 代码 : 
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<html> 

<head> 

<title> 用 户 意见 反馈 页 面 </title> 

</head> 

<body> 

<hl align=center> 用 户 意 见 反馈 页 面 </h1> 
<form method="post" > 

<p> 姓 gnbsp; snbsp; gnbsp; gnbsp; 名 : 

<input type="text" class=txt size="12" maxlength="20" name="username" /> 
</p><p> 性 gnbsp; gnbsp; gnbsp; gnbsp; 别 : 
<input type="radio" value="male" /> 男 
<input type="radio" value="female" /> 女 


</p><p> 年 enbsp; gnbsp; gnbsp; gnbsp; 龄 : 
<input type="text" class=txt name="age" /> 
</p> 
<p> 联 系 电话 : 

DS <input type="text" class=txt name="tel" /> 
</p><p> 电 子 邮 件 : 
<input type="text" class=txt name="email" /> 
</p><p> 联 系 地 址 : 
<input type="text" class=txt name="address" /> 
</p> 
<p> 
请 输入 您 对 网 站 的 建议 <br> 
<textarea name="yourworks" cols ="50" rows = "5"></textarea> 
<br> 


<input type="submit" name="submit" value=" 提 交 "/> 
<input type="reset" name="reset" value=" 清 


除 " /> 而 EY 


© SMe 
sm 








</p> em se 

</form> 用 户 意见 反馈 页 面 
</body> 姓名 

</html> 性 串 ，C 见 O 女 


年 的 


代码 输入 完成 后 ， 将 其 保存 为 “表单 .html” 文 “二 
件 ， 然 后 双击 该 文件 ， 就 可 以 在 下 浏览 器 中 查看 到 使 《ww 二 一 
用 表单 标记 插入 表单 后 的 效果 了 ， 如 图 1-25 所 示 ， 可 
以 看 到 创建 的 用 户 反馈 表单 ， 包 含 一 个 标题 “用 户 意 。 加 本 
见 反馈 页 面 ”， 还 包括 “姓名 ”“ 性 别 ” “年龄 站 
“联系 电话 ”“ 电 子 邮件 ”“ 联 系 地 址 ”等 内 容 。 


1.5 ”综合 案例 一 一 制作 日 程 表 


通过 在 记事 本 文件 中 输入 HTML 语言 代码 ， 可 以 制作 出 多 种 多 样 的 页 面 效 果 。 本 节 将 以 
制作 日 程 表 为 例 ， 介 绍 HTML 语言 的 综合 应 用 方法 。 其 具体 的 操作 步骤 如 下 。 
EC 打开 记事 本 文件 ， 在 其 中 输入 以 下 代码 : 
<html> 
<head> 
<META http-equiv="Content-Type" content="text/html; charset=gb2312" /> 


<title> 制 作 日 程 表 </title> 
</head> 

















<body> 
</body> 
</html> 


输入 以 上 代码 后 的 记事 本 页 面 ， 如 图 1-26 所 示 。 
在 </head> 标 记 之 前 输入 以 下 代码 : 
<style type="text/css"> 

body { 


background-color: #FFD9D9; 
text-align: center; 








. 

</style> 

输入 以 上 代码 后 的 记事 本 页 面 ， 如 图 1-27 所 示 。 
司 元 i 是 -记事 本 oOo x 司 天 -6 二 
文件 月 ” 妨 缉 [E) 合式 (D) 查看 (V】 大 卫 (H) 文才 淹 丰 (于 式 (D) 可 看 (V) 助人 7 | 
<html> Chtmly 
head) Chead> 


META htt v="Conteont-Type” contont="text/html; charset=gb2312” /> 
a de 





|bogy 

body> background-colcr; HrFD9D9; 
/bady> ext-align: center; 
Cntmly 中 


/style> 
c/oead> 


Codyy 
/badyy 
/htnly v 





图 1-26 输入 代码 后 的 记事 本 页 面 (1) 图 1-27 输入 代码 后 的 记事 本 页 面 (2) 
ETT》 在 </style> 之 前 输入 以 下 代码 ; 
六 


font-family: "方正 粗 活 意 简体 "，" 方 正大 黑 简 体 "; 
font-size: 36px; 


} 
输入 以 上 代码 后 的 记事 本 页 面 ， 如 图 1-28 所 示 。 
EEDUD 在 <body> 和 </body> 标 记 之 间 输 入 以 下 代码 : 


<span class="ziti"> 一 周 日 程 表 </span> 


输入 以 上 代码 后 的 记事 本 页 面 ， 如 图 1-29 所 示 。 





下 二 日 区 EE ox 
4 RE) fe0) EM Re ze0) me m0) EEM well 
ly [aa 下 
机 ent- Type “tert/i ”1 i “Content-Type” content="text/htal, charset=gd2312" /> 

1 Type” eontente"tort/htal, charsetreh2312" /> le z a0" /) 
PI 人 us 
<atyle typo= text/ca3 > Cs type™ tert/css 


body { 
axeround 
tast-aii 





+ 有 FI9D9 
er 


-ziti { 
a 本体， 方 大 归 于 
et 


atyley 














党 
图 1-28 输入 代码 后 的 记事 本 页 面 (3) 图 1-29 输入 代码 后 的 记事 本 页 面 (4) 
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本 TY 在 <body> 标 记 之 前 输入 以 下 代码 ;: 


<table width="470" border="]1" align="center™" 


cellspacing="3"> 


<tr> 
<td 
<td 
<td 
<td 
<td 
</tr> 
<tr> 
<td 
<td 
<td 
<td 
<td 
了 
<tr> 
<td 
<td 
<td 
<td 
<td 
</tr> 
<tr> 
<td 
<td 
<td 
<td 
<td 
</tr> 
<tr> 
<td 
<td 
<td 
<td 
<td 
</tr> 
<tr> 
<td 
<td 
<td 
<td 
<td 
/AEr> 


width="84" 
width="84" 
width="86" 
width="83" 
width="83" 
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style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 


center">gnbsp;</td> 
center"> 工 作 一 </td> 
center"> 工 作 二 </td> 
center"> 工 作 三 </td> 


center"> 工 作 四 </ta> 


cellpadding="2" 


style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 


style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 


style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 


style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 


style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 


</table> 


输入 以 上 代码 后 的 记事 本 页 面 ， 如 图 1-30 所 示 。 


EEC 在 【记事 木 】 窗 口中 选择 【文件 】 一 【保存 】 菜 单 命令 ， 弹 出 【另存 为 】 对 话 
框 ， 在 【保存 在 】 下 拉 列 表 框 中 设置 保存 文件 的 位 置 ， 在 【文件 名 】 下 拉 列 表 框 中 
输入 “制作 日 程 表 -html”， 


center; font-family: 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 


center; font-family: 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 


center; font-family: 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 


center; font-family: 
center">gnbsp;</td> 
center">gnbs 
center">gnbs 
center">gnbsp;</td> 





center; font-family: 
center">gnbsp; 
center">gnbsp; 
center">gnbsp;</td> 
center">gnbsp;</td> 






' 宋 体 '; "> 星期 一 </td> 


"宋体 ' "> 星期 二 </td> 


"宋体 ' "> 星期 三 </td> 


"宋体 ' "> 星期 四 </td> 


"宋体 ' "> 星期 五 </td> 


然后 单 击 【保存 】 按 钮 ， 如 图 1-31 所 示 。 
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图 1-30 输入 代码 后 的 记事 本 页 面 (5) 图 1-31 【另存 为 】 对 话 框 


与 
网 
ES 双击 打开 保存 的 “制作 日 程 表 .html” 文 件 ， 即 可 看 到 制作 的 日 程 表 ， 如 图 1-32 3 
所 示 。 i 
EEJRB 如 果 需 要 在 日 程 表 中 添加 工作 内 容 ， 可 以 用 【记事 本 】 程 序 打开 “制作 日 程 
表 .html” 文 件 ， 在 代码 段 <td style="text-align: center">&nbsp;</td> 的 &nbsp 之 前 输入 
内 容 即 可 。 比 如 要 输入 星期 一 完成 的 第 1 件 工作 内 容 “ 完 成 校对 ”， 可 在 如 图 1-33 
所 示 的 位 置 输入 。 
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图 1-32 查看 制作 的 日 程 表 图 1-33 输入 内 容 后 的 记事 本 页 面 
EDE 保存 后 用 浏览 器 打开 该 文档 ， 即 可 看 到 添加 的 工作 内 容 ， 如 图 1-34 所 示 。 





【 司 Csers\qangi\Dec 吕 -5 | 夸 钙 日 且 志 x 
文件 (月 ”六 绢 (E) 坦 看 (/) 收藏 夫 (A) 工具 (T) 其 助 (H) 


一 周 日 程 表 


En 开 作 三 下 工作 | 











































































































图 1-34 ”查看 制作 的 日 程 表 
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1.6 疑难 解 惑 


疑问 1: HTML5 中 的 单 标记 和 双 标 记 的 书写 方法 是 什么 ? 

答 : HIML5 中 的 标记 分 为 单 标记 和 双 标 记 。 单 标记 是 指 没有 结束 标记 的 标记 ， 双 标记 是 
指 既 有 开始 标记 又 包含 结束 标记 。 

对 于 单 标记 是 不 允许 写 结束 标记 的 元 素 ， 只 允许 以 < 元 素 记 的 形式 进行 书写 和 使 用 。 例 
如 ，<br> 和 </br> 的 书写 方式 是 错误 的 ， 正 确 的 书写 方式 为 <br/>。 当 然 ， 在 HIML5 之 前 的 版 
本 中 ，<br> 这 种 书写 方法 可 以 被 沿用 。HTML5 中 不 允许 写 结束 标记 的 元 素 有 area、base、 
br、 col、 command、embed、hr、img、input、keygen、link、meta、param、source、track、 
wbr。 

对 于 部 分 双 标 记 可 以 省 略 结束 标记 。HTML5 中 允许 省 略 结束 标记 的 元 素 有 li、dt、dd、 
p、 rt、 rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。 

HTML5 中 有 些 元 素 还 可 以 完全 被 省 略 。 即 使 这 些 标记 被 省 略 了 ， 该 元 素 还 是 以 隐 式 的 方 
式 存 在 。HTML5 中 允许 省 略 全 部 标记 的 元 素 有 html、head、body、colgroup、tbody。 


疑问 2: 使 用 记事 本 编辑 HTML 文件 时 应 注意 哪些 事项 ? 


答 : 很 多 初学 者 在 保存 文件 时 ， 没 有 将 HTML 文件 的 扩展 名 .html 或 .htm 作为 文件 的 后 
级， 导致 文件 还 是 以 .txt 为 扩展 名 ， 因 此 ， 无 法 在 浏览 器 中 查看 。 如 果 读 者 是 通过 单 击 右键 创 
建 的 记事 本 文件 ， 那 么 在 给 文件 重 命名 时 ， 一 定 要 以 .html 或 .htm 作为 文件 的 后 级。 特别 要 注 
意 的 是 ， 当 Windows 系统 的 扩展 名 是 隐 式 的 时 ， 更 容易 出 现 这 样 的 错误 。 为 避免 这 种 情况 的 
发 生 ， 读 者 可 以 在 【文件 夹 选项 】 对 话 框 中 查看 扩展 名 是 否 是 显 式 的 。 


第 2 章 
整体 把 握 网 站 
结构 一 网 站 
配色 与 布局 


一 个 网 站 能 否 成 功 ， 很 大 程度 上 取决 于 网 页 的 结构 与 配色 。 因 此 ， 在 学 习 制 作 
动态 网 站 之 前 ， 首 先 需要 掌握 网 站 结构 与 网 页 配色 的 相关 基础 知识 。 本 章 介绍 的 内 
容 包 括 网 页 配色 的 相关 技巧 、 网 站 结构 的 布局 以 及 网 站 配色 的 经 典 案例 等 。 
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2.1 善 用 色彩 设计 网 页 


经 研究 发 现 ， 当 用 户 第 一 次 打开 某 个 网 站 时 ， 给 用 户 留 下 第 一 印象 的 既 不 是 网 站 的 内 
容 ， 也 不 是 网 站 的 版 面 布 局 ， 而 是 网 站 具有 冲击 力 的 色彩 ， 如 图 2-1 所 示 。 





图 2-1 网 页 色彩 搭配 


色彩 的 魅力 是 无 限 的 ， 它 可 以 让 本 身 平淡 无 味 的 东西 瞬间 变 得 漂亮 起 来 。 作 为 最 具 说 服 
力 的 视觉 语言 ， 作 为 最 强烈 的 视觉 冲击 ， 色 彩 在 人 们 的 生活 中 起 着 先 声 夺 人 的 作用 。 因 此 ， 
作为 一 名 优秀 的 网 页 设计 师 ， 不 仅 要 掌握 基本 的 网 站 制作 技术 ， 还 要 掌握 网 站 的 配色 风格 等 
设计 艺术 。 


2.1.1 认识 色彩 


为 了 能 更 好 地 应 用 色彩 来 设计 网 页 ， 需 要 先 了 解 色彩 的 一 些 基本 概念 。 自 然 界 中 有 许多 
种 色彩 ， 比 如 玫瑰 是 红色 的 、 大 海 是 蓝 色 的 、 橘 子 是 橙色 的 …… 但 是 最 基本 的 色彩 只 有 3 
种 ( 红 、 绿 、 蓝 )， 其 他 的 色彩 都 可 以 由 这 3 种 色彩 调和 而 成 。 这 3 种 色彩 称 为 “三 原 
色 ”， 如 图 2-2(a) 所 示 。 

现实 生活 中 的 色彩 可 以 分 为 彩色 和 非 彩 色 。 其 中 黑白 灰 属 于 非 彩色 系列 ， 其 他 的 色彩 都 
属于 彩色 系列 。 任 何 一 种 彩色 的 色彩 都 具备 色相 、 明 度 和 纯度 3 个 特征 。 而 非 彩 色 的 色彩 只 
具有 明度 属性 。 


1. 色相 


色相 指 的 是 色彩 的 名 称 。 这 是 色彩 最 基本 的 特征 ， 是 一 种 色彩 区 别 于 另 一 种 色彩 最 主要 
的 因素 ， 如 紫色 、 绿 色 、 黄 色 等 都 代表 了 不 同 的 色相 。 同 一 色相 的 色彩 ， 通 过 调整 亮度 或 者 
纯度 ， 就 很 容易 搭配 ， 如 图 2-2(b) 所 示 。 


2. 明度 


明度 也 叫 亮度 ， 是 指 色彩 的 明暗 程度 。 明 度 越 大 ， 色 彩 越 亮 ， 比 如 一 些 购物 、 儿 童 类 网 
站 ， 用 的 是 一 些 鲜亮 的 颜色 ， 让 人 感觉 绚丽 多 姿 、 生 机 勃勃 。 明 度 越 低 ， 颜 色 越 暗 。 低 明度 
的 色彩 主要 用 于 一 些 充满 神秘 感 的 游戏 类 网 站 ， 以 及 一 些 为 了 体现 个 人 的 孤 俱 或 者 忧郁 等 性 


| 


格 的 个 人 网 站 。 


音 境 革 避 出 省 吏 洪 _ 协 Z 小 必 





六 语 由 中 加 二 习 





2-2 三 原色 与 色相 


有 明度 差 的 色彩 更 容易 调和 ， 如 紫色 (#993399) 与 黄色 (#ffff00)、 暗 红 (#cc3300) 与 草绿 
(#99cc00)、 瞳 蓝 (#0066cc) 与 梅 色 (#ff9933) 等 ， 如 图 2-3 所 示 。 


pp A 





图 2-3 色彩 的 明度 


3. 纯度 
纯度 指 色彩 的 鲜艳 程度 。 纯 度 高 的 色彩 颜色 鲜亮 ;纯度 低 的 色彩 颜色 暗淡 发 灰 。 


2.1.2 ”确定 网 站 的 主题 色 


一 个 网 站 一 般 不 使 用 单一 颜色 ， 因 为 会 让 人 感觉 单调 、 乏 味 ; 但 也 不 能 将 所 有 的 颜色 都 
运用 到 网 站 中 ， 让 人 感觉 不 庄重 。 一 个 网 站 必须 围绕 一 种 或 两 种 主题 色 进行 设计 ， 这 样 既 不 
至 于 让 客户 迷失 方向 ， 也 不 至 于 让 客户 感到 单调 、 乏 味 。 所 以 确定 网 站 的 主题 色 是 设计 者 必 
须 考虑 的 问题 之 一 。 


1. 主题 色 确 定 的 两 个 方面 


在 确定 网 站 主题 色 时 ， 通 常 可 以 从 以 下 两 个 方面 去 考虑 。 

1) ”结合 产品 、 内 容 特 点 

根据 产品 的 特点 来 确定 网 站 的 主 色调 。 如 果 企业 产品 是 环保 型 的 ， 可 以 采用 绿色 ， 如 果 
企业 主 营 的 产品 是 高 科技 或 电子 类 的 ， 可 以 采用 蓝 色 等 ， 如 果 是 红酒 企业 ， 则 可 以 考虑 使 用 
红酒 的 色调 ， 如 图 2-4 所 示 。 
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2-4 ”商业 网 站 色彩 的 搭配 


2) ”根据 企业 的 VI 识别 系统 

如 今 有 很 多 公司 都 有 自己 的 VI 识别 系统 ， 从 公司 的 名 片 、 办 公 室 的 装修 、 手 提 袋 等 可 以 
看 到 ， 这 些 都 是 公司 沉淀 下 来 的 企业 文化 。 网 站 作为 企业 的 宣传 方式 之 一 ， 也 在 一 定 程度 上 
需要 考虑 这 些 因素 。 


2. 主题 色 的 设计 原则 


在 主题 色 确定 时 还 要 考虑 以 下 原则 ， 这 样 设计 出 的 网 站 界面 才能 别出心裁 ， 体 现 出 企业 
的 独特 风格 ， 更 有 利于 向 受众 传递 企业 信息 。 

1) “与 众 不 同 、 富 有 个 性 

过 去 许多 网 站 都 喜欢 选择 与 竞争 对 手 的 网 站 相近 的 颜色 ， 试 图 通过 这 样 的 策略 来 快速 实 
现 网 站 构建 ， 减 少 建站 成 本 ， 但 这 种 建站 方式 鲜 有 成 功 者 。 网 站 的 主题 色 一 定 要 与 竞争 网 站 
能 明显 地 区 别 开 ， 只 有 与 众 不 同 、 别 具 一 格 才 是 成 功 之 道 ， 这 是 网 站 主题 色 选 择 的 首要 原 
则 。 如 今 越 来 越 多 的 网 站 规划 者 开始 认识 到 一 点 ， 比 如 中 国联 通 已 经 改变 过 去 模仿 中 国 移动 
的 色彩 ， 推 出 了 与 中 将 国人 5 PF: 




















2-5 ”以 橘 色 为 标准 色 的 中 国联 通 网 页 


2) “符合 大 众 审美 习惯 

由 于 大 众 的 色彩 偏好 非常 复杂 ， 而 且 是 多 变 的 ， 甚 至 是 瞬息 万 变 的 ， 因 此 要 选择 最 能 吻 
合 大 众 偏好 的 色彩 非常 困难 ， 甚 至 是 不 可 能 的 。 最 好 的 办 法 是 剔除 掉 大 众 所 禁 忌 的 颜色 。 比 
如 ， 巴 西 人 忌讳 棕 黄 色 和 紫色 ， 他 们 认为 棕 黄 色 使 人 绝望 ， 紫 色 会 带 来 悲哀 ， 紫 色 和 黄色 配 
在 一 起 ， 则 是 患 病 的 预兆 。 所 以 在 选择 网 站 主题 色 时 要 考虑 用 户 群 体 的 审美 习惯 。 


2.1.3 网 页 中 色彩 的 搭配 


色彩 在 人 们 的 生活 中 带 有 丰富 的 感情 和 含义 ， 在 特定 的 场合 下 ， 同 种 色彩 可 以 代表 不 同 
的 含义 。 色 彩 总 的 应 用 原则 应 该 是 “总 体 协调 ， 局 部 对 比 ”， 即 主页 的 整体 色彩 效果 是 和 谐 
的 ， 局 部 、 小 范围 的 地 方 可 以 配 一 些 对 比 强烈 的 色彩 。 在 色彩 的 运用 上 ， 可 根据 主页 内 容 的 
需要 ， 分 别 采用 不 同 的 主 色调 。 

色彩 具有 象征 性 ， 比 如 嫩绿 色 、 翟 绿色 、 金 黄色 、 灰 褐色 分 别 象征 春 、 夏 、 秋 、 冬 。 其 
次 还 有 职业 的 标志 色 ， 比 如 军 警 的 橄榄 绿 、 医 疗 卫生 的 白色 等 。 色 彩 还 具有 明显 的 心理 感 
觉 ， 比 如 冷 、 暧 的 感觉 ， 进 、 退 的 效果 等 。 另 外 ， 色 彩 还 具有 民族 性 。 各 个 民族 由 于 环境 、 
文化 、 传 统 等 因素 的 影响 ， 对 于 色彩 的 喜好 也 存在 着 较 大 的 差异 。 


1. 色彩 的 搭配 


充分 运用 以 下 色彩 的 这 些 特性 ， 可 以 使 网 站 的 主页 具有 深刻 的 艺术 内 涵 ， 从 而 提升 主页 
的 文化 品位 。 

(1) 相近 色 。 色 环 中 相 邻 的 3 种 颜色 。 相 近 色 的 搭配 给 人 的 视觉 效果 很 舒适 、 很 自然 ， 
所 以 相近 色 在 网 站 设计 中 极为 常用 。 

(2) 互补 色 。 色 环 中 相对 的 两 种 色彩 。 对 互补 色调 整 一 下 补 色 的 亮度 ， 有 时 是 一 种 很 好 
的 措 配 。 

(3) 上 暖色。 暖色 与 黑色 措 配 ， 一 般 应 用 于 购物 类 网 站 、 电 子 商 务 网 站 、 儿 童 类 网 站 等 ， 
用 以 体现 商品 的 琳琅 满目 ， 或 网 站 的 活泼 、 温 馨 等 效果 ， 如 图 2-6 所 示 。 

(4) 冷色 。 冷 色 一 般 与 白色 搭配 ， 通 常 应 用 于 一 些 高 科技 、 游 戏 类 网 站 ， 主 要 表达 严 
肃 、 稳 重 等 效果 。 绿 色 、 蓝 色 、 蓝 紫色 等 都 属于 冷色 系列 ， 如 图 2-7 所 示 。 





图 2-6 暖色 色 系 的 网 页 示例 图 2-7 冷色 色 系 的 网 页 示例 
(5) 色彩 均衡 。 网 站 要 让 人 看 上 去 舒适 、 协 调 ， 除 了 文字 、 图 片 等 内 容 的 排版 合理 外 ， 


六 讲 慎 获 国 坪 到 一 一 圭 堆 二 到 往 汕 侣 网 Hz 由 四 
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色彩 均衡 也 是 相当 重要 的 一 部 分 。 比 如 一 个 网 站 不 可 能 单一 地 运用 一 种 颜色 ， 所 以 色彩 的 均 
衡 问题 是 设计 者 必须 要 考虑 的 问题 。 
2. 非 彩色 的 搭配 


黑色 与 白色 搭配 是 最 基本 和 最 简单 的 搭配 ， 无 论 是 白字 黑 底 还 是 黑 底 白字 都 非常 清晰 明 
了 。 灰 色 是 万 能 色 ， 可 以 和 任何 色彩 搭配 ， 也 可 以 帮助 两 种 对 立 的 色彩 和 谐 过 渡 。 如 果 在 网 
页 设计 中 实在 找 不 出 合适 的 搭配 色彩 ， 那 么 可 以 尝试 用 灰色 ， 效 果 绝 对 不 会 太 差 ， 如 图 2-8 所 示 。 
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图 2-8 黑白 色 性 的 网 页 示例 
2.1.4 网 页 元 素 的 色彩 搭配 
为 了 让 网 页 设计 得 更 靓丽 、 更 舒适 ， 增 强 页 面 的 可 阅读 性 ， 必 须 合 理 、 恰 当地 运用 页 面 
各 元 素 间 的 色彩 搭配。 
1. 网 页 导航 条 


网 页 导航 条 是 网 站 的 指 路 方向 标 ， 浏 览 者 在 网 页 间 的 跳 转 、 了 解 网 站 的 结构 、 查 看 网 站 
的 内 容 时 都 必须 使 用 导航 条 。 导 航 条 的 色彩 搭配 ， 可 以 使 用 稍微 具有 跳跃 性 的 色彩 吸引 浏览 
者 的 视线 ， 使 其 感觉 网 站 清晰 明了 、 层 次 分 明 ， 如 图 2-9 所 示 
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图 2-9 网 页 导航 条 的 色彩 搭配 
2. 网 页 链接 
一 个 网 站 不 可 能 只 有 一 页 ， 所 以 文字 与 图 片 的 链接 是 网 站 中 不 可 缺少 的 部 分 。 尤 其 是 文 
字 链 接 ， 因 为 文字 链接 有 别 于 一 般 文字 ， 所 以 文字 链接 的 颜色 不 能 与 文字 的 颜色 一 样 。 要 让 


浏览 者 快速 找到 网 站 链接 ， 设 置 独特 的 文字 链接 颜色 是 一 种 驱使 浏览 者 单 击 链接 的 好 办 法 ， 
如 图 2-10 所 示 。 





2-10 ”网 页 链接 的 色彩 搭配 


3. 网 页 文字 


如 果 网 站 中 使 用 了 背景 颜色 ， 就 必须 考虑 背景 颜色 的 用 色 与 前 景 文字 的 色彩 措 配 问题 。 
一 般 的 网 站 侧重 的 是 文字 ， 所 以 背景 的 颜色 可 以 使 用 纯度 或 者 明度 较 低 的 色彩 ， 文 字 的 颜色 


可 以 使 用 较为 突出 的 亮色 ， 让 人 一 目 了 然 。 
4. 网 站 标志 


网 站 标志 是 宣传 网 站 最 重要 的 部 分 之 一 ， 所 以 网 站 标志 在 页 面 上 一 定 要 突出 、 醒 目 ， 可 
以 将 网 站 的 Logo 或 Banner 做 得 鲜亮 一 些 。 也 就 是 说 ， 在 色彩 搭配 方面 网 站 标志 的 色彩 要 与 
网 页 的 主题 色彩 分 离开 。 有 时 为 了 更 突出 ， 也 可 以 使 用 与 主题 色相 反 的 颜色 ， 如 图 2-11 所 


不 。 
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2-11 网 站 标志 的 色彩 搭配 


2.1.5 网 页 色彩 搭配 的 技巧 


色彩 搭配 是 一 门 艺 术 ， 灵 活 地 运用 它 能 让 网 站 的 主页 更 具 亲 和 力 。 要 想 制作 出 漂亮 的 主 
页 ， 在 灵活 运用 色彩 的 基础 上 还 需要 加 上 自己 的 创意 和 技巧 。 下 面 详细 介绍 网 页 色彩 搭配 的 


一 些 常用 技巧 。 
1. 单 色 的 使 用 


尽管 网 站 设计 要 避免 采用 单一 的 色彩 ， 以 免 产 生 单调 的 感觉 但 通过 调整 单一 色彩 的 饱 
和 度 与 透明 度 ， 也 可 以 使 网 站 色彩 产生 变化 ， 使 网 站 避免 单调 ， 做 到 色彩 统一 、 有 层次 感 ， 
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如 图 2-12 所 示 。 


2. 邻近 色 的 使 用 


邻近 色 就 是 色 带 上 相 邻 近 的 颜色 ， 比 如 绿色 和 蓝 色 、 红 色 和 黄色 就 互 为 邻近 色 。 采 用 邻 
近 色 设计 网 页 可 以 使 网 页 避免 色彩 杂乱 ， 易 于 使 页 面色 彩 丰 富 、 和 谐 统一 ， 如 图 2-13 所 示 。 
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图 2-12 单 色 的 使 用 示例 图 2-13 邻近 色 的 使 用 示例 


3. 对 比 色 的 使 用 


对 比 色 可 以 突出 重点 ， 产 生 强 烈 的 视觉 效果 。 通 过 合理 使 用 对 比 色 ， 能 够 使 网 站 特色 鲜 
明 、 重 点 突出 。 在 设计 时 ， 一 般 以 一 种 颜色 为 主 色调 ， 将 对 比 色 作 为 点 级 ， 可 以 对 设计 起 到 
画龙点睛 的 作用 。 


4. 黑色 的 使 用 


黑色 是 一 种 特殊 的 颜色 ， 如 果 使 用 恰当 、 设 计 合 理 ， 往 往 能 产生 很 强 的 艺术 效果 。 黑 色 
一 般 用 来 作为 背景 色 ， 与 其 他 纯度 色彩 搭配 使 用 。 


5. 背景 色 的 使 用 


背景 颜色 不 要 太 深 ， 否 则 会 显得 过 于 厚重 ， 而 且 还 会 影响 整个 页 面 的 显示 效果 。 让 
时 ， 一 般 采 用 素 淡 清雅 的 色彩 ， 避 免 采 用 花纹 复杂 的 图 片 和 纯度 很 高 的 色彩 作为 背景 色 ， 同 
时 ， 背 景色 要 与 文字 的 色彩 对 比 强烈 一 些 。 但 也 有 例外 ， 使 用 黑色 的 背 9 景 衬托 规 丽 的 文本 和 
图 像 ， 则 会 给 人 一 种 另类 的 感觉 ， 如 图 2-14 所 示 。 


6. 色彩 的 数量 


一 般 初 学 者 在 设计 网 页 时 往往 会 使 用 多 种 颜色 ， 使 网 页 变 得 很 “ 花 ”， 缺 乏 统一 和 协调 
感 ， 缺 乏 内 在 的 美感 ， 给 人 一 种 繁杂 的 感觉 。 事 实 上 ， 网 站 用 色 并 不 是 越 多 越 好 ， 一 般 应 控 
制 在 4 种 色彩 以 内 ， 可 以 通过 调整 色彩 的 各 种 属性 来 使 网 页 产生 颜色 上 的 变化 ， 从 而 保持 整 
个 网 页 的 色调 统一 。 
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2-14 背景 色 的 使 用 示例 
7. 要 和 网 站 内 容 匹 配 


了 解 网 站 所 要 传达 的 信息 和 品牌 ， 选 择 可 以 加 强 这 些 信息 的 颜色 ， 比 如 在 设计 一 个 强调 
稳健 的 金融 机 构 时 ， 就 要 选择 冷色 系 ， 如 柔和 的 蓝 、 灰 或 绿色 。 如 果 使 用 暖色 系 或 活泼 的 颜 
色 ， 可 能 会 破坏 该 网 站 的 品牌 。 


8. 围绕 网 页 主题 


色彩 要 能 烘托 出 主题 。 根 据 主 题 确定 网 站 颜色 ， 同 时 还 要 考虑 网 站 的 访问 对 象 ， 文 化 的 
差异 也 会 使 色彩 产生 非 预 期 的 反应 。 还 有 ， 不 同 地 区 与 不 同年 龄 层 对 颜色 的 反应 也 会 有 所 不 
同 。 年 轻 人 一 般 比 较 喜 欢 饱和 色 ， 但 这 样 的 颜色 引 不 起 高 龄 人 群 的 兴趣 。 

此 外 ， 白 色 是 网 站 用 得 最 普遍 的 一 种 颜色 。 很 多 网 站 甚至 留 出 大 块 的 白色 空间 ， 作 为 网 
站 的 一 个 组 成 部 分 ， 这 就 是 留 白 艺术 。 很 多 设计 性 网 站 较 多 地 运用 留 白 艺术 ， 给 人 一 个 遐想 
的 空间 ， 让 人 感觉 心情 舒适 、 畅 快 。 恰 当 的 留 白 对 于 协调 页 面 的 均衡 会 起 到 相当 大 的 作用 ， 
如 图 2-15 所 示 。 

总 之 ， 色 彩 的 使 用 并 没有 一 定 的 法 则 ， 如 果 一 定 要 用 某 个 法 则 去 套 ， 效 果 只 会 适 得 其 
反 。 色 彩 的 运用 还 与 每 个 人 的 审美 观 、 个 人 喜好 、 知 识 层 次 等 密切 相关 。 一 般 应 先 确定 一 种 
能 体现 主题 的 主体 色 ， 然 后 根据 具体 的 需要 通过 近似 和 对 比 的 手段 来 完成 整个 页 面 的 配色 方 
案 。 整 个 页 面 在 视觉 上 应 该 是 一 个 整体 ， 以 达到 和 谐 、 悦 目的 视觉 效果 ， 如 图 2-16 所 示 。 





图 2-15 ”网 页 留 白 处 理 图 2-16 网 页 色彩 的 搭配 
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2.2 ”常见 网 站 的 布局 结构 


在 规划 网 站 的 页 面前 ， 对 所 要 创建 的 网 站 要 有 充分 的 认识 和 了 解 。 大 量 的 前 期 准备 工作 
可 使 设计 者 在 规划 网 页 时 胸有成竹 、 得 心 应 手 、 一 路 畅行 。 在 网 站 中 网 页 布局 大 致 可 分 为 
“ 国 ” 字 型 、 标 题 正文 型 、 左 右 框架 型 、 上 下 框架 型 、 综 合 框架 型 、 封 面 型 、Flash 型 等 。 


2.2.1 “ 国 ” 字 型 


“ 国 ” 字 型 也 可 以 称 为 “ 同 ” 字 型 ， 它 是 布局 一 些 大 型 网 站 时 常用 的 一 种 结构 类 型 ， 即 网 
页 最 顶端 是 网 站 的 标题 和 横幅 广告 条 ， 接 下 来 是 网 站 的 主要 内 容 。 网 页 左右 分 列 一 些 内 容 条 
目 ， 中 间 是 主要 部 分 ， 与 左右 一 起 罗列 到 底 。 最 下 方 是 网 站 的 一 些 基本 信息 、 联 系 方式 和 版 
权 声 明 等 。 这 种 结构 几乎 是 网 上 使 用 最 多 的 一 种 结构 类 型 ， 如 图 2-17 所 示 。 
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图 2-17 “ 国 ” 字 型 网 页 结构 
2.2.2 ”标题 正文 型 


标题 正文 型 即 网 页 最 上 方 是 标题 或 类 似 的 一 些 东 西 ， 下 方 是 正文 ， 如 图 2-18 所 示 。 一 些 
网 站 的 文章 页 面 或 注册 页 面 等 采用 的 就 是 这 种 类 型 。 





2-18 ”标题 正文 型 网 页 结构 


2.2.3 左右 框架 型 

左右 框架 型 是 一 种 左右 分 布 的 框架 结构 。 一 般 来 说 ， 左 侧 是 导航 链接 ， 有 时 最 上 方 会 有 
一 个 小 的 标题 或 标志 ， 右 侧 是 正文 。 大 部 分 的 大 型 论坛 采用 的 都 是 这 种 结构 ， 有 一 些 企业 网 
站 也 喜欢 采用 这 种 结构 。 这 种 类 型 的 结构 非常 清晰 ， 使 人 一 目 了 然 ， 如 图 2-19 所 示 。 
2.2.4 上 下 框架 型 


上 下 框架 型 与 左右 框架 型 类 似 ， 区 别 仅 在 于 这 是 一 种 分 为 上 下 两 部 分 的 框架 ， 如 图 2-20 
所 示 。 





图 2-19 左右 框架 型 网 页 结构 图 2-20 上 下 框架 型 网 页 结构 


2.2.5 ”综合 框架 型 
综合 框架 型 是 多 种 结构 的 结合 ， 是 相对 复杂 的 一 种 框架 结构 ， 如 图 2-21 所 示 。 
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图 2-21 综合 框架 型 网 页 结构 
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2.2.6 封面 型 


封面 型 网 页 结构 基本 上 出 现在 一 些 网 站 的 首页 ， 大 部 分 为 一 些 精美 的 平面 设计 与 一 些小 
的 动画 相 结合 ， 放 上 几 个 简单 的 链接 ， 或 者 仅 是 一 个 “进入 ”的 链接 ， 甚 至 直接 在 首页 的 图 
片上 做 链接 而 没有 任何 提示 。 这 种 类 型 大 部 分 出 现在 企业 网 站 和 个 人 主页 。 如 果 处 理 得 好 ， 
则 会 给 人 带 来 赏心悦目 的 感觉 ， 如 图 2-22 所 示 。 


2.2.7 Flash 型 


其 实 Flash 型 网 页 结构 与 封面 型 结构 是 类 似 的 ， 只 是 这 种 类 型 采用 了 目前 非常 流行 的 
Flash。 与 封面 型 不 同 的 是 ， 由 于 Flash 具有 强大 的 功能 ， 所 以 页 面 所 表达 的 信息 更 丰富 。 其 
视觉 效果 及 听觉 效 果 如 果 处 理 得 当 ， 绝 不 亚 于 传统 的 多 媒体 ， 如 图 2-23 所 示 。 























图 2-22 封面 型 网 页 结构 图 2-23 ”Flash 型 网 页 结构 


2.3 ”综合 案例 一 一 定位 网 站 页 面 的 框架 


在 网 站 布局 中 采用 “综合 框架 型 ”网 页 结构 对 网 站 进行 布局 ， 即 网 站 的 头 部 主要 用 于 放 
置 网 站 Logo 和 网 站 导航 ; 网 站 的 左 框架 主要 用 于 放置 商品 分 类 、 销 售 排行 榜 等 ， 网 站 的 主体 
部 分 则 为 显示 网 站 的 商品 和 对 商品 的 购买 交易 ; 网 站 的 底部 主要 放置 版 权 信息 等 。 

设计 网 页 之 前 ， 设 计 者 可 以 先 在 Photoshop 中 勾画 出 框架 ， 然 后 再 在 该 框架 的 基础 上 进行 
布局 ， 有 具体 的 操作 步骤 如 下 。 

打开 Photoshop CC， 如 图 2-24 所 示 。 

EEC 选择 【文件 】 一 【新 建 】 菜 单 命令 ， 打 开 【 新 建 】 对 话 框 ， 在 其 中 设置 文档 的 

【宽度 】 为 1024 像素 、【 高 度 】 为 800 像素 ， 如 图 2-25 所 示 。 

ES 单 击 【确定 】 按 钮 ， 即 可 创建 一 个 1024 像素 x800 像素 的 文档 ， 如 图 2-26 所 示 。 

EC 选择 左 侧 工 具 箱 中 的 【和 矩形 工具 】， 并 调整 路 径 状 态 ， 画 一 个 矩形 框 ， 如 
图 2-27 所 示 。 
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图 2-25 【新 建 】 对 话 框 六 

















图 2-26 创建 空白 文档 图 2-27 ”绘制 矩形 杠 
[05> 使 用 文字 工具 创建 一 个 文本 图 层 ， 输 入 “网 站 页 面 的 头 部 ”， 如 图 2-28 所 示 。 
S53 依次 绘 出 网 站 页 面 的 中 左 、 中 右 和 底部 ， 网 站 页 面 的 结构 布局 最 终 如 图 2-29 所 示 。 
确定 好 网 站 页 面 框架 后 ， 就 可 以 结合 各 相关 知识 进行 网 站 页 面 不 同 区 域 的 布局 设计 了 。 





















部 
he | 网 站 页 面 的 头 部 
网 站 页 面 的 中 左 网 站 页 面 的 中 右 
网 站 页 面 的 底部 
2-28 输入 文字 图 2-29 ”网 站 页 面 结构 的 最 终 布 局 
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24 疑难 解 惑 


疑问 1: 如 何 使 自己 网 站 的 配色 更 具有 亲和力 ? 


答 : 在 对 网 页 进行 配色 时 ， 必 须 考虑 网 站 本 身 的 性 质 。 如 果 网 站 的 产品 以 化 妆 品 为 主 ， 
那么 这 样 的 网 站 配色 多 采用 和 柔和、 柔美、 明亮 的 色彩 ， 可 以 给 人 一 种 温柔 的 感觉 ,具有 很 强 
的 亲和力 。 


疑问 2: 如 何在 自己 的 网 页 中 营造 出 地 中 海风 情 的 配色 ? 


答 : 使 用 “ 白 十 蓝 ” 的 配色 ， 可 营造 出 地 中 海风 情 的 配色 。 白 色 很 容易 令 人 感到 十 分 的 
自由 ， 好 像 是 属于 大 自然 的 一 部 分 ， 令 人 心胸 开阔 ， 像 海天 一 色 的 大 自然 一 样 开 阔 自 在 。 要 
想 营 造 这 样 的 地 中 海 式 风情 ， 必 须 把 室内 的 物品 ， 比 如 家 具 、 装 饰品 、 窗 帘 等 都 限制 在 一 个 
色 系 中 ， 这 样 就 会 产生 统一 感 。 对 于 向 往 政 海蓝 天 的 人 士 ， 白 色 与 蓝 色 是 居家 生活 最 佳 的 拱 
配 选 择 。 


第 3 章 
磨 刀 不 误 砍 柴 工 一 一 
使 用 Dreamweaver 


CC 创建 站 点 


Dreamweaver CC 是 一 款 专业 的 网 页 编辑 软件 ， 利 用 它 可 以 创建 网 页 。 其 强大 
的 站 点 管理 功能 、 合 理 的 站 点 结构 能 够 加 快 对 站 点 的 设计 ， 提 高 工作 效率 ， 节 省 时 
间 。 本 章 将 要 介绍 的 内 容 就 是 如 何 利用 Dreamweaver CC 创建 并 管理 网 站 站 点 。 
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3.1 认识 Dreamweaver CC 


在 学 习 如 何 使 用 Dreamweaver CC 制作 网 页 之 前 ， 先 来 认识 一 下 Dreamweaver CC 的 工作 
环境 。 


3.1.1 启动 Dreamweaver CC 


完成 Dreamweaver CC 的 安装 后 ， 就 可 以 启动 Dreamweaver CC 了 ， 有 具体 操作 步骤 如 下 。 

ED 选择 【开始 】 一 Adobe Dreamweaver CC 命令 ， 或 双击 桌面 上 的 Dreamweaver CC 
快捷 图 标 ， 如 图 3-1 所 示 。 

启动 Dreamweaver CC， 进 入 Dreamweaver CC 的 初始 化 界面 。Dreamweaver CC 
的 初始 化 界面 时 尚 、 大 方 ， 给 人 以 焕然 一 新 的 感觉 ， 如 图 3-2 所 示 。 





一 =- 最 近 添加 


[Dw] Adobe Dreamweaver cc 


Minecraft Windows 10 Edition 


获取 Office 





图 3-1 选择 Adobe Dreamweaver CC 命令 图 3-2 Dreamweaver CC 的 初始 化 界面 


通过 初始 化 界面 ， 便 可 打开 Dreamweaver CC 工作 区 的 开始 页 面 。 默 认 情况 下 ， 
Eeeee 的 工作 区 是 以 【设计 】 视 图 布局 的 ， 如 图 3-3 所 示 。 

ES 在 开始 页 面 中 ， 单 击 【 新 建 】 栏 下 方 的 HTML 选项 ， 即 可 打开 Dreamweaver CC 
的 工作 界面 ， 如 图 3-4 所 示 。 









































图 3-3 Dreamweaver CC 的 开始 界面 3-4 ”Dreamweaver CC 的 工作 界面 


a 


3.1.2 ”认识 Dreamweaver CC 的 工作 区 


在 Dreamweaver CC 的 工作 区 可 查看 到 文档 和 对 象 属性 。 工 作 区 将 许多 常用 的 工具 放置 于 
工具 栏 中 ， 便 于 快速 地 对 文档 进行 修改 。Dreamweaver CC 的 工作 区 主要 由 应 用 程序 栏 、 菜 单 
栏 、【 插 入 】 面 板 、 文 档 工具 栏 、 文 档 窗口 、 状 态 栏 、【 属 性】 面板 和 面板 组 等 部 分 组 成 ， 
如 图 3-5 所 示 。 
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图 3-5 Dreamweaver CC 的 工作 界面 





1. 菜单 栏 


该 部 分 包括 10 个 菜单 ， 单 击 每 个 菜单 的 标签 ， 会 弹出 一 个 下 拉 菜 单 ， 利 用 菜单 中 的 命令 
基本 上 能 够 实现 Dreamweaver CC 的 所 有 功能 。 菜 单 栏 如 图 3-6 所 示 。 


文人 (编辑 (E) 得 看 (V 插入 (I 修改 (M) 格式 (0) 命令 (CO) 站 点 (S$) 窗口 (W) 帮助 (H) 
图 3-6 菜单 栏 
2. 文档 工具 栏 


该 部 分 包含 3 种 文档 窗口 视图 (代码 、 拆 分 和 设计 ) 按 钮 、 各 种 查看 选项 和 一 些 常 用 的 操作 
功能 (如 在 浏览 器 中 预览 )， 如 图 3-7 所 示 。 


| 代码 | 拆 分 [设计 ] 实时 视图 。 名。 标题 : 无 标 题 文档 ws 








图 3-7 文档 工具 栏 


文档 工具 栏 中 常用 按钮 的 功能 如 下 。 

(1) 【显示 代码 视图 】 按 钮 代码， 单 击 该 按钮 ， 可 以 在 文档 窗口 中 显示 和 修改 HTML 
源 代码 。 

(2) 【显示 代码 视图 和 设计 视图 】 按 钮 拆 分 ， 单 击 该 按钮 ， 在 文档 窗口 中 同时 显示 
HTML 源 代码 和 页 面 的 设计 效果 。 

(3) 【显示 设计 视图 】 按 钮 设计 ， 单 击 该 按钮 ， 可 以 在 文档 窗口 中 显示 网 页 的 设计 效果 。 
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(4) 【实时 视图 】 按 钮 实时 图 |， 单 击 该 按钮 ， 显 示 不 可 编辑 的 、 交 互 式 的 、 基 于 浏览 
器 的 文档 视图 。 a 

(5) 【在 浏览 器 中 预览 /调试 】 按 钮 辟 :: 单 击 该 按钮 ， 可 在 定义 好 的 浏览 器 中 预览 或 调 
试 网 页 。 

(6) 【文档 标题 】 文 本 框 胡 更 琴 汉 克 ”“”]， 该 文本 框 用 于 设置 或 修改 文档 的 标题 。 

(7) 【文件 管理 】 按 钮 劲 : 单 击 该 按钮 ， 通 过 弹出 的 菜单 可 实现 消除 只 读 属性 、 获 取 、 
取出 、 上 传 、 存 回 、 撤 销 取出 、 设 计 备 注 以 及 在 站 点 定位 等 功能 。 


3. 文档 窗口 


文档 窗口 用 于 显示 当前 创建 和 编辑 的 文档 。 在 该 窗口 中 ， 既 可 以 输入 文字 、 插 入 图 片 、 
绘制 表格 等 ， 也 可 以 对 整个 页 面 进行 处 理 ， 如 图 3-8 所 示 。 


we -ow 











Es PIES 


图 3-8 文档 窗口 





4. 状态 栏 


状态 栏 位 于 文档 窗口 的 底部 ， 包 括 两 个 功能 区 ， 即 标签 选择 器 (用 于 显示 和 控制 文档 当前 
插入 点 位 置 的 HTML 源 代码 标记 )、 窗 口 大 小 弹出 菜单 (用 于 显示 页 面 大 小 ， 允 许 将 文档 窗口 
的 大 小 调整 到 预定 义 或 自 定义 的 尺寸 )， 如 图 3-9 所 示 。 


Cbodyy 可 加 夯 256xsav a 
图 3-9 状态 栏 











5. 【属性 】 面 板 


【 属性】 面板 是 网 页 中 非常 重要 的 面板 ， 用 于 显示 在 文档 窗口 中 所 选 元 素 的 属性 ， 并 且 可 
以 对 被 选中 元 素 的 属性 进行 修改 。 该 面板 随 着 选择 元 素 的 不 同 而 显示 不 同 的 属性 ， 如 
图 3-10 所 示 。 
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图 3-10 【属性 】 面板 


6. 【插入 】 面 板 

【插入 】 面 板 包含 将 各 种 网 页 元 素 (如 图 像 、 表 格 和 AP 元 素 等 ) 插 入 到 文档 时 的 快捷 按 
钮 。 每 个 对 象 都 是 一 段 HTML 代码 ， 插 入 不 同 的 对 象 时 ， 可 以 设置 不 同 的 属性 。 单 击 相应 的 
按钮 ， 可 插入 相应 的 元 素 。 要 显示 【插入 】 面 板 ， 选 择 【 窗 口 】 一 【插入 】 菜 单 命令 即 可 ， 
如 图 3-11 所 示 。 


7. 【文件 】 面 板 
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【文件 】 面 板 用 于 管理 文件 和 文件 夹 ， 无 论 它 们 是 Dreamweaver 站 点 的 一 部 分 ， 还 是 位 于 信 
远程 服务 器 上 。 在 【文件 】 面 板 中 还 可 以 访问 本 地 磁盘 中 的 全 部 文件 ， 如 图 3-12 所 示 。 器 
oo 
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图 3-11 【插入 】 面 板 图 3-12 【文件 】 面 板 





3.1.3 体验 Dreamweaver CC 的 新 增 功能 


Dreamweaver CC 是 Dreamweaver 的 最 新 版 本 ， 它 同 以 前 的 Dreamweaver CS6 版 本 相 
比 ， 增 加 了 一 些 新 的 功能 ， 并 且 还 增强 了 很 多 原 有 的 功能 。 下 面 就 对 Dreamweaver CC 的 新 
增 功能 进行 简单 介绍 ， 带 领 读者 一 起 体验 CC 的 新 增 功能 。 


1. CSS 设计 器 


Dreamweaver CC 新 增 了 CSS 设计 器 功能 ， 高 度 直观 的 
可 视 化 编辑 工具 ， 不 仅 可 以 帮助 用 户 生成 Web 标准 的 代码 ， 
而 且 可 以 快速 查看 和 编辑 与 特定 上 下 文 有 关 的 样式 ， 如 图 3-13 
所 示 。 

2. 云 同步 

Dreamweaver CC 新 增 了 云 同步 功能 ， 通 过 该 功能 用 户 可 
以 在 Creative Cloud 上 存放 文件 、 应 用 程序 和 站 点 定义 。 当 
需要 时 只 需 登录 Creative Cloud 即 可 随时 随地 访问 它们 。 

在 Dreamweaver CC 界面 中 ， 选 择 【 编 辑 】 一 【首选 一 
项 】 菜 单 命令 ， 打 开 【 首 选项 】 对 话 框 ， 在 【分 类 】 列 表 框 图 3-13 ”CSS 设计 器 
中 选择 【同步 设置 】 选 项 ， 即 可 在 右 侧 的 面板 中 设置 云 同 步 ， 
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如 图 3-14 所 示 。 
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图 3-14 【首选 项 】 对 话 框 
3. 支持 新 平台 
Dreamweaver CC 对 HTML5、CSS3、jQuery 和 jQuery Mobile 支持 更 灵活 和 更 完善 。 
4. 用 户 界面 简化 


对 工作 界面 进行 了 全 新 的 简化 ， 减 少 了 对 话 框 的 数量 和 很 多 不 必要 的 操作 按钮 ， 如 对 文 
档 工具 栏 和 状态 栏 都 进行 了 精简 ， 使 得 整个 工作 界面 更 加 简洁 。 


5. 插入 【画布 】 功 能 


在 Dreamweaver CC 的 【常用 】 选 项 卡 中 新 增 了 【画布 】 插 入 按钮 。 打 开 【 插 入 】 面 
板 ， 然 后 在 【常用 】 选 项 卡 中 单 击 【画布 】 按 钮 ， 即 可 快速 地 在 网 页 中 插入 HTML5 画布 元 
素 ， 如 图 3-15 所 示 。 


6. 新 增 网 页 结构 元 素 
在 Dreamweaver CC 中 新 增 了 HTML5 结构 语义 元 素 的 插入 操作 按钮 ， 它 们 位 于 【 插 


入 】 面 板 中 的 【结构 】 选 项 卡 中 ， 包 括 页 眉 、 标 题 、Navigation、 侧 边 、 文 章 、 章 节 和 页 脚 
等 ， 如 图 3-16 所 示 。 通 过 这 些 按钮 ， 可 以 快速 地 在 网 页 中 插入 HIMLS 语义 标签 。 


7. 新 增 Edge Web Fonts 


在 Dreamweaver CC 中 新 增 了 Edge Web Fonts 的 功能 ， 在 网 页 中 可 以 加 载 Adobe 提供 的 
EdgeWeb 字体 ， 从 而 在 网 页 中 实现 特殊 字体 效果 。 依 次 选择 【修改 】 一 【管理 字体 】 菜 单 命 
令 ， 从 打开 的 【管理 字体 】 对 话 框 中 选择 Adobe Edge Web Fonts 选项 卡 ， 即 可 使 用 Adobe 提 
供 的 Edge Web 字体 ， 如 图 3-17 所 示 。 
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图 3-15 单 击 【 画 布 】 按 钮 3-16 ”新 增 结构 元 素 





8. 在 【媒体 】 面 板 中 新 增 HTML5 音频 和 视频 按钮 


Dreamweaver CC 提供 了 对 HTML5 更 全 面 、 更 便捷 的 支持 ， 用 户 可 以 通过 新 增 的 HTML5 
音频 和 视频 插入 按钮 ， 如 图 3-18 所 示 ， 在 网 页 中 轻松 插入 HIMLS 音频 和 视频 ， 而 不 需要 编 
写 HTML5 代码 。 
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图 3-17 选择 Adobe Edge 图 3-18 HTML5 Video 按钮 和 
Web Fonts 选项 卡 HTML5 Audio 按钮 


9. 在 【媒体 】 面 板 中 新 增 Adobe Edge Animate 动画 


在 【媒体 】 面 板 中 新 增 了 Adobe Edge Animate 动画 ， 默 认 情 况 下 ， 用 户 在 Dreamweaver 
中 插入 Adobe Edge Animate 动画 后 ， 会 自动 在 当前 站 点 的 根 目录 中 生成 一 个 名 为 edgeanimate 
assets 的 文件 夹 ， 将 Adobe Edge Animate 动画 的 提取 内 容 放 入 该 文件 夹 中 。 如 果 需 要 在 
Dreamweaver CC 中 插入 Adobe Edge Animate 动画 ， 可 以 单 击 【 插 入 】 面 板 【 媒 体 】 选 项 卡 
中 的 【Edge Animate 作品 】 按 钮 ， 如 图 3-19 所 示 。 


10. 新 增 表单 输入 类 型 
在 Dreamweaver CC 中 新 增 了 许多 HTMLS5 表单 输入 类 型 ， 如 数字 、 范 围 、 颜 色 、 月 、 





Dreamweaver CC 动态 网 站 开发 


案例 课堂 (第 2 版 )» 一 


周 、 日 期 、 时 间 、 日 期 时 间 和 日 期 时 间 ( 当 地 )， 如 图 3-20 所 示 。 单 击 相应 的 按钮 ， 即 可 在 页 
面 中 插入 相应 的 HTML5 表单 输入 类 型 。 
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图 3-19 单 击 【Edge Animate 作品 】 按 钮 3-20 ”新 增 表单 输入 类 型 


3.2 创建 站 点 


一 般 在 制作 网 页 之 前 ， 都 需要 先 创建 站 点 ， 这 是 为 了 更 好 地 利用 站 点 对 文件 进行 管理 ， 
可 以 尽 可 能 减少 链接 与 路 径 方面 的 错误 。 本 节 将 介绍 创建 本 地 站 点 以 及 使 用 高 级 面板 创建 站 
点 的 方法 。 


3.2.1 案例 1 一 一 创建 本 地 站 点 


使 用 向 导 创 建 本 地 站 点 的 具体 操作 如 下 。 

EC 启动 Dreamweaver CC， 然 后 选择 【站 点 】 一 【新 建站 点 】 菜 单 命令 ， 即 可 打开 
【站 点 设置 对 象 我 的 站 点 】 对 话 框 ， 从 中 输入 站 点 的 名 称 ， 并 设置 本 地 站 点 文件 夹 
的 路 径 和 名 称 ， 如 图 3-21 所 示 。 

EEJ29 单 击 【保存 】 按 钮 ， 即 可 完成 本 地 站 点 的 创建 ， 在 【文件 】 面 板 【 本 地 文件 】 
窗 格 中 会 显示 该 站 点 的 根 目录 ， 如 图 3-22 所 示 。 
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3-21 【站 点 设置 对 象 我 的 站 点 】 对 话 框 图 3-22 【本 地 文件 】 窗 格 


3.2.2 ”案例 2 一 一 创建 远程 站 点 


在 远程 服务 器 上 创建 站 点 ， 需 要 在 远程 服务 器 上 指定 远程 文件 夹 的 位 置 ， 该 文件 夹 将 存 
储 网 站 中 的 文件 和 资源 。 
创建 远程 站 点 的 具体 操作 步骤 如 下 。 
EC 选择 【站 点 】 一 【新 建站 点 】 菜 单 命令 ,在 弹出 的 站 点 设置 对 象 对 话 框 中 输入 
站 点 名 称 并 选择 本 地 站 点 文件 夹 ， 如 图 3-23 所 示 。 
国 T7Y 选择 【服务 器 】 选 项 ， 单 击 【 添 加 新 服务 器 】 按 钮 和 ， 如 图 3-24 所 示 。 
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图 3-23 ”站 点 设置 对 象 对 话 框 图 3-24 选择 【服务 器 】 选 项 
EEJRS 在 打开 的 对 话 框 中 输入 【服务 器 名 称 】， 然 后 选择 连接 方式 ， 如 果 网 站 的 空间 
已 经 购买 完成 ， 可 以 选择 【连接 方法 】 为 FTP， 再 输入 【FTP 地 址 】、【 用 户 名 】 
和 【密码 】 等 ， 如 图 3-25 所 示 。 










































































































































































EC 选择 【高 级 】 选 项 卡 ， 根 据 需 要 设置 远程 服务 器 的 高 级 属性 ， 然 后 单 击 【 保 
存 】 按 钮 即 可 ， 如 图 3-26 所 示 。 
[Es -wn EE mn CC 二 
各 名和 [二 = i 
局 维护 同 “信息 
i [EE = 口 人 让 时 自动 格 文件 上 人 ll 了 8 务 各 
FTP oil: [mmo 端 DD:[21 口 自用 文件 职 出 功能 
用 户 各 :| Te 回 打开 文件 之 前 取出 
二 怕 晤 和: 
电子 邮 人 地址 : | 一 
要 BB 果 : _ 测 志 服务 器 
| FF 
RS 
ED | EE EE 
图 3-25 【基本 】 选 项 卡 图 3-26 【高 级 】 选 项 卡 


ECRD) 返回 站 点 设置 对 象 对 话 框 中 ， 在 其 中 可 以 看 到 新 建 的 远程 服务 器 的 相关 信息 ， 
单 击 【 保 存 】 按 钮 ， 如 图 3-27 所 示 。 

EEIRUD 站 点 创建 完成 ， 在 【文件 】 面 板 的 【本 地 文件 】 窗 格 中 会 显示 该 站 点 的 根 目 
录 。 单 击 【 连 接 到 远 端 主机 】 按 钮 型， 即 可 连接 到 远程 服务 器 ， 如 图 3-28 所 示 。 
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et 0 Web 项 晤 。 
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3-27 ”站 点 设置 对 象 对 话 框 图 3-28 【文件 】 面 板 





3.3 管理 站 点 


在 创建 完 站 点 以 后 ， 还 可 以 对 站 点 进行 多 方面 的 管理 ， 如 打开 站 点 、 编 辑 站 点 、 删 除 站 
点 及 复制 站 点 等 。 


3.3.1 案例 3 一 一 打开 站 点 


打开 站 点 的 具体 操作 如 下 。 

EEC 在 Dreamweaver CC 工作 界面 中 ， 选 择 【 站 点 】 一 【管理 站 点 】 菜 单 命令 ， 如 
图 3-29 所 示 。 

EEJ2p 即 可 打开 【管理 站 点 】 对 话 框 ， 然 后 选择 【您 的 站 点 】 列 表 框 中 的 【我 的 站 
点 】 选 项 ， 如 图 3-30 所 示 。 最 后 单 击 【 完 成 】 按 钮 ， 即 可 打开 站 点 。 
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图 3-29 选择 【管理 站 点 】 菜 单 命令 3-30 【管理 站 点 】 对 话 框 


3.3.2 ”案例 4 一 一 编辑 站 点 


对 于 创建 好 的 站 点 ， 还 可 以 对 其 属性 进行 编辑 ， 具 体 的 操作 如 下 。 

EEJUJ 在 Dreamweaver CC 工作 界面 的 右 侧切 换 到 【文件 】 面 板 ， 然 后 单 击 【 我 的 站 点 】 
文本 框 右 侧 的 下 拉 按钮 ， 从 弹出 的 快捷 菜单 中 选择 【管理 站 点 】 命 令 ， 如 图 3-31 所 示 。 

EEE29 即 可 打开 【管理 站 点 】 对 话 框 ， 从 中 选 定 要 编辑 的 站 点 名 称 ， 然 后 单 击 【 编 辑 
当前 选 定 的 站 点 】 按 钮 到， 如 图 3-32 所 示 。 





















































3-31 【管理 站 点 】 选 项 3-32 ” 单 击 【 编 辑 当前 选 定 的 站 点 】 按 钮 


ECDIS 即 可 打开 站 点 设置 对 象 对 话 框 ， 在 该 对 话 框 中 按照 创建 站 点 的 方法 对 站 点 进行 
编辑 ， 如 图 3-33 所 示 。 

EC》 单 击 【保存 】 按 钮 ， 返 回 到 【管理 站 点 】 对 话 框 ， 然 后 单 击 【完成 】 按 钮 ， 即 

可 完成 编辑 操作 ， 如 图 3-34 所 示 。 
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图 3-33 ”站 点 设置 对 象 对 话 框 3-34 【管理 站 点 】 对 话 框 


3.3.3 ”案例 5 一 一 删除 站 点 


如 果 不 再 需要 创建 的 站 点 ， 可 以 将 其 从 站 点 列表 中 删除 。 具 体 的 操作 如 下 。 

EGR 选中 要 删除 的 本 地 站 点 ， 然 后 单 击 【 管 理 站 点 】 对 话 框 中 的 【删除 当前 选 定 的 
站 点 】 按 钮 世 ， 如 图 3-35 所 示 。 

ECDD) 此 时 系统 会 弹出 警告 提示 框 ， 如 图 3-36 所 示 ， 提 示 用 户 不 能 撤销 删除 操作 ， 询 

问 是 否 要 删除 选中 的 站 点 ， 单 击 【 是 】 按 钮 ， 即 可 将 选中 的 站 点 删除 。 
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图 3-35 【管理 站 点 】 对 话 框 图 3-36 ”警告 提示 框 
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3.3.4 ”案例 6 一 一 复制 站 点 


如 果 想 创建 多 个 结构 相同 或 类 似 的 站 点 ， 则 可 利用 站 点 的 可 复制 性 实现 。 复 制 站 点 的 具 
体操 作 如 下 。 
EGRD 在 【管理 站 点 】 对 话 框 中 单 击 【复制 当前 选 定 的 站 点 】 按 钮 加 ， 如 图 3-37 
所 示 。 
EU2 即 可 复制 该 站 点 ， 复 制 出 的 站 点 会 出 现在 【您 的 站 点 】 列 表 框 中 ， 且 该 名 称 在 
原 站 点 名 称 的 后 面 会 添加 “复制 ”字样 ， 如 图 3-38 所 示 。 


3 














a 
E72 
E3 


















































图 3-37 【管理 站 点 】 对 话 框 图 3-38 复制 站 点 后 的 效果 


3.3.5 “案例 7 一 一 导出 与 导入 站 点 


如 果 要 在 其 他 计算 机 上 编辑 同一 个 网 站 ， 此 时 可 以 通过 导出 站 点 的 方法 ， 将 站 点 导出 为 
ste 格式 的 文件 ， 然 后 导入 到 其 他 计算 机 上 即 可 。 有 具体 操作 步骤 如 下 。 
EEIDp 在 【管理 站 点 】 对 话 框 中 ， 选 中 需要 导出 的 站 点 后 ， 单 击 【 导 出 当前 选 定 的 站 
点 】 按 钮 区 ， 如 图 3-39 所 示 。 
EC 打开 【导出 站 点 】 对 话 框 ， 在 【文件 名 】 下 拉 列 表 框 中 输入 导出 文件 的 名 称 ， 
单 击 【 保 存 】 按 钮 即 可 ， 如 图 3-40 所 示 。 
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3-39 【管理 站 点 】 对 话 框 3-40 【导出 站 点 】 对 话 框 


EEDRS 在 其 他 计算 机 上 打开 【管理 站 点 】 对 话 框 ， 单 击 【导入 站 点 】 按 钮 ， 如 图 3-41 














































































































所 示 。 
EC 打开 【导入 站 点 】 对 话 框 ， 选 中 需要 导入 的 文件 ， 单 击 【打开 】 按 钮 ， 如 图 3-42 
所 示 。 
| 全 革 加 SNA x 
a 4 条 [Em 一 
3 下 3 -be 者 + ”4 3 
Si ite 
| 国 症 
ss 回 2 
CE (Sri [有 | | Wh rn ce i rw 症 
训 te | | 
图 3-41 【管理 站 点 】 对 话 框 图 3-42 【导入 站 点 】 对 话 框 
国 于 BY 返回 到 【管理 站 点 】 对 话 框 ， 即 可 看 到 新 导入 的 站 点 ， 如 图 3-43 所 示 。 
改 
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图 3-43 新 导入 的 站 点 


3.4 ”操作 站 点 文件 及 文件 夹 


无 论 是 创建 空白 文档 ， 还 是 利用 已 有 的 文档 创建 站 点 ， 都 需要 对 站 点 中 的 文件 或 文件 夹 
进行 操作 。 在 【本 地 文件 】 窗 格 中 ， 可 以 对 本 地 站 点 中 的 文件 夹 和 文件 进行 创建 、 删 除 、 移 
动 和 复制 等 操作 。 


3.4.1 案例 8 一 一 创建 文件 夹 


在 本 地 站 点 中 创建 文件 夹 的 具体 操作 如 下 。 

EC 在 Dreamweaver CC 工作 界面 的 右 侧切 换 到 【文件 】 面 板 ， 然 后 选中 【本 地 文 
件 】 中 创建 的 站 点 并 右 击 ， 从 弹出 的 快捷 菜单 中 选择 【新 建文 件 夹 】 命 令 ， 如 图 3-44 
所 示 。 

EGRP9 此 时 新 建文 件 夹 的 名 称 处 于 可 编辑 状态 ， 可 以 对 其 进行 重 命名 ， 如 这 里 将 其 重 
命名 为 image， 如 图 3-45 所 示 。 
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3-44 ”选择 【新 建文 件 夹 】 命 令 3-45 ”新 建文 件 夹 并 重 命名 




















3.4.2 ”案例 9 一 一 创建 文件 


文件 夹 创建 好 后 ， 就 可 以 在 文件 夹 中 创建 相应 的 文件 了 。 具 体 的 操作 如 下 。 

EED 切换 到 【文件 】 面 板 ， 在 准备 新 建文 件 的 位 置 处 右 击 ， 从 弹出 的 快捷 菜单 中 选 
择 【 新 建文 件 】 命 令 ， 如 图 3-46 所 示 。 

EEJR2 此 时 新 建文 件 的 名 称 处 于 可 编辑 状态 ， 如 图 3-47 所 示 。 

EEJRS 将 新 建 的 文件 重 命名 为 index.html， 然 后 按 Enter 键 完成 输入 ， 即 可 完成 文件 的 
新 建 和 重 命名 操作 ， 如 图 3-48 所 示 。 
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图 3-46 选择 【新 建文 件 】 命 令 图 3-47 新 建文 件 3-48” 重 命名 为 index. html 


3.4.3 ”案例 10 一 一 文件 或 文件 夹 的 移动 和 复制 


站 点 下 的 文件 或 文件 夹 可 以 进行 移动 与 复制 操作 ， 具 体 的 操作 步骤 如 下 。 

EC 选择 【窗口 】 一 【文件 】 菜 单 命令 ， 打 开 【 文 件 】 面 板 ， 选 中 要 移动 的 文件 或 
文件 夹 ， 然 后 拖 动 到 相应 的 文件 夹 中 即 可 ， 如 图 3-49 所 示 。 

EESRU2) 也 可 以 利用 剪 切 和 粘贴 的 方法 来 移动 文件 或 文件 来 。 在 【文件 】 面 板 中 ， 选 中 
要 移动 或 复制 的 文件 或 文件 夹 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【编辑 】 一 【 剪 
切 】 或 【拷贝 】 命 令 ， 如 图 3-50 所 示 。 
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图 3-49 移动 文件 图 3-50 复制 文件 
[gd lS 
xs 进行 移动 可 以 选择 【 剪 切 】〗 命 令 ， 进 行 复制 可 以 选择 【拷贝 】 命 令 。 


EC 选中 目标 文件 夹 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【编辑 】 一 【粘贴 】 命 令 ， 
这 样 文件 或 文件 夹 就 会 被 移动 或 复制 到 相应 的 文件 夹 中 。 


3.4.4 ”案例 11 一 一 删除 文件 或 文件 夹 


对 于 站 点 下 的 文件 或 文件 夹 ， 如 果 不 再 需要 ， 就 可 以 将 其 删除 ， 具 体 的 操作 步骤 如 下 。 

EEIRD 在 【文件 】 面 板 中 ， 选 中 要 删除 的 文件 或 文件 来 ， 然 后 在 文件 或 文件 夹 上 右 

击 ， 在 弹出 的 快捷 菜单 中 选择 【编辑 】 一 【删除 】 命 令 或 者 按 Delete 键 ， 如 图 3-51 
所 示 。 

EC) 洋 出 提示 对 话 框 ， 询 问 是 否 要 删除 所 选 文件 或 文件 来， 单 击 【 是 】 按 钮 ， 即 可 
将 文件 或 文件 夹 从 本 地 站 点 中 删除 ， 如 图 3-52 所 示 。 
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[7] 您 确认 要 员 除 所 迁 文 件 吗 ? 
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Br 和 站 点 的 删除 操作 不 同 ， 对 文件 或 文件 夫 的 删除 操作 会 从 磁盘 上 真正 地 删除 
相应 的 文件 或 文件 夫 。 
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3.5 ”综合 案例 一 一 创建 本 地 站 点 


通过 本 章 的 学 习 ， 可 以 在 实际 应 用 中 创建 本 地 站 点 了 。 创 建 本 地 站 点 的 具体 操作 步骤 
如 下 。 

EEC 单 击 【 站 点 】 菜 单 标签 ， 从 弹出 的 下 拉 菜单 中 选择 【新 建站 点 】 命 令 ， 即 可 打 
开 站 点 设置 对 象 对 话 框 ， 然 后 在 【站 点 名 称 】 文 本 框 中 输入 “ 千 谷 网 络 ”， 如 图 3-53 
所 示 。 

区 TB 单 击 【 本 地 站 点 文件 夹 】 文 本 框 右 侧 的 【浏览 文件 夹 】 按 钮 图 ， 即 可 打开 【 选 
择 根 文件 夹 】 对 话 框 ， 在 该 对 话 框 中 选择 放置 站 点 “ 千 谷 网 络 ”的 文件 夹 ， 如 图 3-54 
所 示 。 








图 3-53 ”站 点 设置 对 象 对 话 框 图 3-54 选择 存放 站 点 的 文件 夹 


EEJS 单 击 【选择 文件 夹 】 按 钮 ， 返 回 到 站 点 设置 对 象 对 话 框 ， 此 时 可 以 看 到 【本 地 
站 点 文件 夹 】 文 本 框 中 已 经 显示 为 “D:\ 千 谷 网 络 \”， 如 图 3-55 所 示 。 

EEC 单 击 【 保 存 】 按 钮 ， 返 回 到 Dreamweaver CC 工作 界面 ， 然 后 选择 【站 点 】 一 
【管理 站 点 】 菜 单 命令 ， 从 打开 的 【管理 站 点 】 对 话 框 中 可 以 查看 新 建 的 站 点 ， 如 
图 3-56 所 示 。 






































图 3-55 ”应 用 选择 的 文件 夹 图 3-56 【管理 站 点 】 对 话 框 


3.6 疑难 解 惑 


疑问 1: 在 【资源 】 面 板 中 ， 为 什么 有 的 资源 在 预览 区 中 无 法 正常 显示 (如 Flash 动画 )? 


答 ; 之 所 以 会 出 现 这 种 情况 ， 主 要 是 由 于 不 同类 型 的 资源 有 不 同 的 预览 显示 方式 。 比 如 
Flash 动画 ， 被 选中 的 Flash 在 预览 区 中 显示 为 占 位 符 ， 要 观看 其 播放 效果 ， 必 须 单 击 预览 区 
中 的 【播放 】 按 钮 。 


疑问 2: 在 Adobe Dreamweaver CC 的 【属性 】 面 板 中 为 什么 只 显示 了 其 标题 栏 ? 
答 : 之 所 以 会 出 现 这 种 情况 ， 主 要 是 由 于 属性 检查 器 被 折 车 起 来 了 。Adobe Dreamweaver 
CC 为 了 节省 屏幕 空间 ， 为 各 个 面板 组 都 设计 了 折 车 功能 ， 单 击 该 面板 组 的 标题 名 称 ， 即 可 在 


“展开 ”与 “折合 ”状态 之 间 进 行 切换 。 同 时 对 于 不 用 的 面板 组 还 可 以 将 其 暂时 关闭 ， 需 要 使 
用 时 再 通过 【窗口 】 菜 单 将 其 打开 。 
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制作 我 的 第 一 个 网 页 一 一 使 用 文本 丰富 网 页 


有 图 有 真相 一 一 使 用 图 像 与 多 媒体 网 页 元 素 
不 在 网 页 中 迷路 一 一 设计 网 页 中 的 超 链接 
让 网 页 互动 起 来 一 一 使 用 网 页 表单 和 行为 
简单 的 网 页 布局 一 一 使 用 表格 布局 网 页 
批量 制作 网 页 一 一 使 用 模板 和 库 

读 懂 样式 表 密 码 一 一 使 用 CSS 层 到 样式 表 
架构 师 的 大 比拼 一 一 利用 Div+CSS 布局 网 页 





第 4 章 
制作 我 的 第 一 个 网 页 
一 使 用 文本 
富 网 页 内 容 


浏览 网 页 时 ， 通 过 文本 获取 信息 是 最 直接 的 方式 。 文 本 是 基本 的 信息 载体 ， 不 
管 网 页 内 容 如 何 丰 富 ， 文 本 自始至终 都 是 网 页 中 最 基本 的 元 素 。 本 章 就 来 介绍 使 用 
文本 丰富 网 页 内 容 。 





Dreamweaver CC 动态 网 站 开发 
案例 课堂 (第 2 版 ) 


4.1 网 页 文档 的 基本 操作 

使 用 Dreamweaver CC 可 对 网 站 的 网 页 进行 编辑 。 该 软件 为 创建 Web 文档 提供 了 灵活 的 
编辑 环境 。 
4.1.1 案例 1 一 一 创建 网 页 


制作 网 页 的 第 一 步 就 是 创建 空白 网 页 文档 ， 使 用 Dreamweaver CC 创建 空白 网 页 文档 的 具 
体操 作 步 又 如 下 。 


EC 选择 【文件 】 一 【新 建 】 菜 单 命令 。 打 开 【 新 建文 档 】 对 话 框 ， 并 选择 其 左 侧 


的 【空白 页 】 选 项 ， 在 【页 面 类 型 】 列 表 框 中 选择 HTML 选项 ， 在 【布局 】 列 表 框 
中 选择 【无 】 选 项 ， 如 图 4-1 所 示 。 


EECRP9 单 击 【 创 建 】 按 钮 ， 即 可 创建 一 个 空白 文档 ， 如 图 4-2 所 示 。 
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图 4-1 【新 建文 档 】 对 话 框 

















图 4-2 创建 空白 文档 
4.1.2 ”案例 2 一 一 页 面 属性 


创建 空白 文档 后 ， 接 下 来 需要 对 文件 的 页 面 属性 进行 设置 ， 也 就 是 设置 整个 网 站 页 面 的 
外 观 效果 。 选 择 【 修 改 】 一 【页 面 属性 】 菜 单 命令 ， 如 图 4-3 所 示 ; 或 按 Ctl+J 组 合 键 ， 打 
开 【 页 面 属性 】 对 话 框 ， 从 中 可 以 设置 外 观 、 链 接 、 标 题 、 标 题 /编码 和 跟踪 图 像 等 属性 。 下 
面 分 别 介绍 如 何 设置 页 面 的 外 观 、 链 接 、 标 题 等 属性 。 


1. 设置 外 观 
在 【页 面 属 性 】 对 话 框 的 【分 类 】 列 表 框 中 选择 【外 观 】 选 项 ， 可 以 设置 CSS 外 观 和 


HTML 外 观 。 外 观 的 设置 可 以 从 页 面 字体 、 文 字 大 小 、 文 本 颜色 等 方面 进行 ， 如 图 4-4 
所 示 。 
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Eu| Ce my 
图 4-3 选择 【页 面 属性 】 命 令 图 4-4 【页 面 属性 】 对 话 框 


例如 ， 想 要 设置 文本 的 字体 样式 ， 可 以 在 【页 面 字体 】 下 拉 列 表 框 中 选择 一 种 字体 样 
式 ， 然 后 单 击 【 应 用 】 按 钮 ， 页 面 中 的 字体 即 可 显示 为 该 种 字体 样式 ， 如 图 4-5 所 示 。 


了 属性 x 
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|' a Ms te) cmsclss, Mnle | [| 
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XW) 国 | 
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Haar) [ ] ES 

重 页 他) 加 


0 [J em: 
Lsn CE rts: 
生活 是 一 首 歌 ， 一 首 五 丈 纺 和 的 歌 ， 一 首 低沉 而 又 高 台 的 歌 ， 一 首 令 人 无 法 捉 
| CD 芒 E07 摸 的 歌 ， 生 活 中 约 观 难 困 苗 就 是 训 一 个 个 由 动 的 音符 ， 由 于 这 些 音符 的 加 入 才 
, = 使 生活 变 得 更 加 美妙 。 





图 4-5 设置 页 面 字体 
2. 设置 链接 


在 【页 面 属 性 】 对 话 框 的 【分 类 】 列 表 框 中 选择 【链接 】 选 项 ， 可 设置 链接 的 属性 ， 如 
图 4-6 所 示 。 


3. 设置 标题 
在 【页 面 属 性 】 对 话 框 的 【分 类 】 列 表 框 中 选择 【标题 】 选 项 ， 可 设置 标题 的 属性 ， 如 
图 4-7 所 示 。 
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4. 设置 标题 /编码 


在 【页 面 属性 】 对 话 框 的 【分 类 】 列 表 框 中 选择 【标题 /编码 】 选 项 ， 可 以 设置 标题 /编码 
的 属性 。 比 如 网 页 的 标题 、 文 档 类 型 和 网 页 中 文本 的 编码 ， 如 图 4-8 所 示 。 


5. 设置 跟踪 图 像 


在 【页 面 属性 】 对 话 框 的 【分 类 】 列 表 框 中 选择 【跟踪 图 像 】 选 项 ， 可 设置 跟踪 图 像 的 
属性 ， 如 图 4-9 所 示 。 
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和 明度 (7); 400% 
编 四 (ij: |Unicole (UTE-6) 重新 各 入 (B) 让 不 用 
nicods 标准 化 未 单 (?) [5 [ 鸯 秆 分解 ， 后 参 规 东 间 成) | 
口 电 括 wieode 答 名 (bm0(G) 
入 件 文件 
站 上 文件 夫 : 5: VsersWi mga\Dhcunents' 未 命名 站 点 2\ 
EE 要 CC 要] 也 | 疯 由 EE CC 要 一 参 一] [mW 
图 4-8 设置 标题 /编码 图 4-9 设置 跟踪 图 像 


1) ”跟踪 图 像 

【跟踪 图 像 】 选 项 用 于 设置 作为 网 页 跟踪 图 像 的 文件 路 径 。 通 过 单 击 文本 框 右 侧 的 BEw-] 
按钮 ， 也 可 以 在 弹出 的 对 话 框 中 选择 图 像 作为 跟踪 图 像 ， 如 图 4-10 所 示 。 

跟踪 图 像 是 Dreamweaver 中 非常 有 用 的 功能 。 使 用 这 个 功能 时 ， 需 先 用 平面 设计 工具 设 
计 出 页 面 的 平面 版 式 ， 再 以 跟踪 图 像 的 方式 将 其 导入 到 页 面 中 ， 这 样 用 户 在 编辑 网 页 时 就 可 























以 精确 地 定位 页 面 元 素 。 
2) ”透明 度 
拖 动 滑 块 ， 可 以 调整 图 像 的 透明 度 ， 透 明度 越 高 ， 图 像 越 清晰 ， 如 图 4-11 所 示 。 
ee [rr le :Tm Pr Ne 
Sy 透明 a | 8 
EE -al mi ao CE a 
图 4-10 添加 图 像 文件 图 4-11 设置 图 像 的 透明 度 


:可 使 用 了 【跟踪 图 像 〗 后 ， 原 来 的 背景 图 像 则 不 会 显示 。 但 是 在 IE 浏览 器 中 预 
帅 总 。 览 时 ， 则 会 显示 出 页 面 的 真实 效果 ， 而 不 会 显示 跟踪 图 像 的 效果 . 


4.1.3 ”案例 3 一 一 保存 网 页 


网 页 制作 完成 后 ， 用 户 经 常会 遇 到 的 操作 就 是 保存 网 页 ， 具 体操 作 步 骤 如 下 。 

EI 在 Dreamweaver CC 工作 界面 中 选择 【文件 】 一 【保存 】 菜 单 命令 ， 如 图 4-12 
所 示 。 

ET 打开 【另存 为 】 对 话 框 ， 设 置 文 件 的 保存 路 径 和 文件 名 称 后 ， 单 击 【 保 存 】 按 
钮 即 可 ， 如 图 4-13 所 示 。 
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图 4-12 选择 【保存 】 菜 单 命令 图 4-13 【另存 为 】 对 话 框 


Se 为 了 提高 保存 网 页 的 效率 ， 用 户 可 以 直接 按 Ctrl+S 组 合 键 来 保存 网 页 文件 。 
另外 ， 用 户 选择 【文件 〗 一 【 另 保 存 】〗 莱 单 命令 ， 也 可 以 打开 【另存 为 〗 对 
话 框 。 


4.1.4 ”案例 4 一 一 打开 网 页 


网 页 文件 保存 完成 后 ， 如 果 还 想 编辑 ， 则 需要 将 其 打开 。 常 见 的 方法 如 下 。 
1. 通过 欢迎 界面 打开 网 页 


启动 Dreamweaver CC 程序 后 ， 在 打开 的 欢迎 界面 中 单 击 【 打 开 】 按 钮 ， 即 可 在 指定 的 位 
置 中 打开 网 页 文件 ， 如 图 4-14 所 示 。 


2. 通过 【文件 】 菜 单打 开 网 页 


在 Dreamweaver CC 工作 界面 中 选择 【文件 】 一 【打开 】 菜 单 命令 ， 即 可 打开 【打开 】 对 
话 框 ， 然 后 选择 要 打开 的 文件 即 可 ， 如 图 4-15 所 示 。 


3. 通过 最 近 访问 的 文件 打开 网 页 


在 Dreamweaver CC 工作 界面 中 选择 【文件 】 一 【打开 最 近 的 文件 】 菜 单 命令 ， 在 弹出 的 
子 菜单 中 选择 需要 打开 的 文件 即 可 ， 如 图 4-16 所 示 。 


4. 通过 打开 方式 打开 网 页 
在 需要 打开 的 网 页 文件 上 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【打开 方式 】 一 Adobe 
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Dreamweaver CC 命令 ， 即 可 打开 选择 的 网 页 文件 ， 如 图 4-17 所 示 。 
Dw Bal #s(e sa NU) aM 


fe 新 建 (N)- CN 


7 








国生 er 
[es 
回 wseesar 









[we 
ee 5(S) Ctrlts 
另存 为 (和 Crl+Shift+s 
保存 全 部 (D 
保 季 所 有 本 基文 件 (R) 
图 4-14 ”欢迎 界面 图 4-15 选择 【打开 】 菜 单 命令 
im 
Dw BRE w(t) 全 如 V REA) BoM) 改 ROI We(O ws) ECW ak 
7 200 360 3 IML DG。 i0 拘 











WE) CarltShif+W 


(5) Cuits 
SFA).. Ctrl+ShAt+S 





司 人 (1) 
避 生 所有 要 文件 R) 


图 4-16 通过 最 近 访问 的 文件 打开 网 页 图 4-17 通过 打开 方式 打开 网 页 


Se 用 户 选 择 网 页 文件 后 ， 按 住 鼠 标 左 键 不 放 ， 直 接 拖 旧 到 Dreamweaver CC 软 
站。 件 工作 界面 上 ， 也 可 以 快速 打开 该 网 页 文件 。 


4.1.5 “案例 5 一 一 预览 网 页 


在 设计 网 页 的 过 程 中 ， 如 果 想 查看 网 页 的 显示 效果 ， 可 以 通过 预览 功能 查看 该 网 页 ， 具 
体操 作 步 又 如 下 。 
选择 【文件 】 一 【在 浏览 器 中 预览 】 菜 单 命令 ， 在 弹出 的 子 菜单 中 选择 查看 网 
页 的 浏览 器 ， 这 里 选择 IEXPLORE 命令 ， 如 图 4-18 所 示 。 
浏览 器 会 自动 启动 ， 并 显示 网 页 的 最 终 显 示 效 果 ， 如 图 4-19 所 示 。 














4-18 选择 IEXPLORE 命令 4-19 ”预览 网 页 效果 





4.2 添加 网 页 内 容 


文字 是 基本 的 信息 载体 ， 是 网 页 中 最 基本 的 元 素 之 一 。 在 网 页 中 运用 丰富 的 字体 、 多 样 
的 格式 以 及 赏心悦目 的 文字 效果 ， 是 网 站 设计 师 必 不 可 少 的 技能 。 


4.2.1 案例 6 一 一 插入 文字 


在 网 页 中 插入 文字 的 具体 操作 步骤 如 下 。 

EC 选择 【文件 】 一 【打开 】 菜 单 命令 ， 弹 出 【打开 】 对 话 框 ， 选 择 要 打开 的 文 
件 ， 这 里 选中 “ch04\ 插 入 文字 .html”， 然 后 单 击 【打开 】 按 钮 ， 如 图 4-20 所 示 。 

EECRP9 将 光标 放置 在 文档 的 编辑 区 ， 如 图 4-21 所 示 。 
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图 4-20 【打开 】 对 话 框 4-21 打开 的 素材 文件 


ET 输入 文字 ， 如 图 4-22 所 示 。 
ED 选择 【文件 】 一 【另存 为 】 菜 单 命令 ， 将 文件 保存 为 “ch04\ 插 入 文本 
后 .html”， 按 F12 键 可 在 浏览 器 中 预览 效果 ， 如 图 4-23 所 示 。 
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图 4-22 输入 文字 图 4-23 ”预览 网 页 效果 
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4.2.2 ”案例 7 一 一 设置 字体 


插入 网 页 文字 后 ， 用 户 可 以 根据 自己 的 需要 对 插入 的 文字 进行 设置 ， 包 括 字体 样式 、 文 
字 大 小 、 文 字 颜色 等 。 
对 网 页 中 的 文本 进行 字体 设置 的 具体 操作 步骤 如 下 。 
EEJDp 打开 资源 文件 中 的 “ch04\ 插 入 文字 后 .html1” 文 件 。 在 文档 窗口 中 ， 选 中 要 设置 
字体 的 文本 ， 如 图 4-24 所 示 。 
ES 在 下 方 的 【属性 】 面 板 中 ， 在 【字体 】 下 拉 列 表 框 中 选择 字体 ， 如 图 4-25 所 示 。 





shine ee 村 
上 人 四 | 折 从 | 冯 寺 | 丽江 上 区 











图 4-24 选中 文本 图 4-25 选择 字体 
EC) 选中 的 文本 即 可 变 为 所 选 字体 。 


4.2.3 ”案例 8 一 一 设置 字号 


字号 是 指 文字 的 大 小 。 在 Dreamweaver CC 中 设置 文字 字号 的 具体 操作 步骤 如 下 。 
EEIoDp 打开 资源 文件 中 的 “ch04\ 插 入 文字 后 .html” 文 件 ， 选 定 要 设置 字号 的 文本 ， 如 
图 4-26 所 示 。 











4-26 ”选中 需要 设置 字号 的 文本 


EEJ29 在 【属性 】 面 板 的 【大 小 】 下 拉 列 表 框 中 选择 字号 。 这 里 选择 18， 如 图 4-27 
所 示 。 
ES 选中 的 文本 字体 大 小 将 更 改 为 18， 如 图 4-28 所 示 。 
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图 4-28 设置 字号 后 的 文本 显示 效果 





rn 如 果 要 设置 相对 默认 字符 大 小 的 增 减 量 ， 可 以 在 同一 个 下 拉 列 表 框 中 选择 
外 xx-small、xx-large 或 smaller 等 选项 。 如 果 要 取消 对 字号 的 设置 ， 选 择 【 无 〗 选 


项 即 可 。 
4.2.4 ”案例 9 一 一 设置 字体 颜色 


多 彩 的 字体 颜色 会 增强 网 页 的 表现 力 。 在 Dreamweaver CC 中 ， 设 置 字体 颜色 的 具体 操作 
步骤 如 下 。 
EEIDp 打开 资源 文件 中 的 “ch04\ 设 置 文本 属性 .html” 文 件 ， 选 中 要 设置 字体 颜色 的 文 
本 ， 如 图 4-29 所 示 。 
EEJDp 在 【属性 】 面 板 中 单 击 【 文 本 颜色 】 按钮 剧 ， 打 开 Dreamweaver CC 颜色 板 ， 从 
中 选择 需要 的 颜色 ， 也 可 以 直接 在 该 按钮 右边 的 文本 框 中 输入 颜色 的 十 六 进 制 数 
值 ， 如 图 4-30 所 示 。 
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图 4-29 选中 文本 图 4-30 设置 文本 颜色 
攻 于 BY 选 定 颜色 后 ， 被 选中 的 文本 将 更 改 为 选 定 的 颜色 ， 如 图 4-31 所 示 。 
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4-31 设置 的 文本 颜色 





4.2.5 ”案例 10 一 一 设置 字体 样式 


字体 样式 是 指 字体 的 外 观 显示 样式 ， 如 字体 的 加 粗 、 倾 斜 、 加 下 画 线 等 。 利 用 
Dreamweaver CC 可 以 设置 多 种 字体 样式 ， 有 具体 的 操作 步骤 如 下 。 

EC 选 定 要 设置 字体 样式 的 文本 ， 如 图 4-32 所 示 。 

区 TP 选择 【格式 】 一 【HTML 样式 】 菜 单 命令 ， 弹 出 子 菜单 ， 如 图 4-33 所 示 。 
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汗 滴 不 下 土 








图 4-32 选中 文本 图 4-33 设置 文本 样式 
各 子 命令 含义 如 下 。 


。 粗 体 : 从 子 菜单 中 选择 【 粗 体 】 命 令 ， 可 将 选中 的 文字 加 粗 显示 ， 如 图 4-34 所 示 。 
ee 斜体: 从 子 菜单 中 选择 【和 斜体】 命令 ， 可 将 选中 的 文字 显示 为 斜体 样式 ， 如 图 4-35 


所 示 。 
钢 不 日 当 午 铠 禾 日 当 午 
汗 滴 禾 下 土 | 汪 注 天 下 疾 | 
图 4-34 设置 文字 为 粗 体 图 4-35 设置 文字 为 斜体 
@ 下 画 线 : 从 子 菜单 中 选择 【下 画 线 】 命 令 ， 可 在 选中 的 文字 下 方 显示 一 条 下 画 线 ， 
如 图 4-36 所 示 。 


| 


5 到 | 利用 【属性 】 面 板 也 可 以 设置 字体 的 样式 。 选 中 文本 后 ， 单 击 【 属 性 了】 面板 
并。 上 的 国 按 钮 可 加 粗 字 体 ， 单 击 芝 按钮 可 使 文本 变 为 儿 体 样式 ， 如 图 4-37 所 示 。 


钠 禾 日 当 午 [> me | 格式 (F) 自若 ~ 类 [content -| BI 汪汪 妇女 标题 (T) 


Bcss w 四 | 无 ~| 洋 扩 人 D “|@ 避 上 
* 
;> 局 大 页 性。 天 5 


图 4-36 ”给 文字 添加 下 画 线 图 4-37 【属性 】 面 板 




















Sn 按 Ctrl+B 组 合 键 ， 可 以 使 选中 的 文本 加 粗 ; 按 CtrltI 组 合 键 ， 可 以 使 选中 的 
SN 文本 倾 针 。 


e 删除 线 : 如 果 从 【格式 】 一 【HTML 样式 】 子 菜单 中 选择 【删除 线 】 命 令 ， 就 会 在 
选中 文字 的 中 部 出 现 一 条 横贯 的 线 ， 表 明文 字 已 被 删除 ， 如 图 4-38 所 示 。 

e ”打字 型 如 果 从 【格式 】 一 【HTML 样式 】 子 菜单 中 选择 【打字 型 】 命 令 ， 就 可 以 
将 选中 的 文本 作为 等 宽度 文本 来 显示 ， 如 图 4-39 所 示 。 





丙 卫 沼 到 上 时装 计 冷 注 人 党 一 一 淹 到 店 | 涉 避 浊 刘 下 ”性 耻 小 全 


MA 





饥 丰 日 当 午 钢 禾 日 当 午 
评注 天 天 证 注 天 下 寺 
图 4-38 添加 文字 删除 线 4-39 设置 字体 的 打字 效果 


ee 所 谓 等 宽度 文本 ， 是 指 每 个 字符 或 字母 的 宽度 相同 。 


@ ”强调 :如果 从 【格式 】 一 【HTML 样式 】 子 菜单 中 选择 【强调 】 命 令 ， 则 表明 选中 
的 文字 需要 在 文件 中 被 强调 。 大 多 数 浏览 器 会 把 它 显示 为 斜体 样式 ， 如 图 4-40 所 示 。 

@ 加强 : 如 果 从 【格式 】 一 【HIML 样式 】 子 菜单 中 选择 【加 强 】 命 令 ， 则 表明 选 定 
的 文字 需要 在 文件 中 以 加 强 的 格式 显示 。 大 多 数 浏览 器 会 把 它 显示 为 粗 体 样式 ， 如 


图 4-41 所 示 。 
钢 禾 日 当 午 钢 禾 日 当 午 
证 注 天 下 二 汗 滴 禾 下 土 
4-40 “添加 文字 强调 效果 图 4-41 加 强 文字 效果 


4.2.6 ”案例 11 一 一 编辑 段落 


段落 指 的 是 一 段 格式 上 统一 的 文本 。 在 文件 窗口 中 每 输入 一 段 文 字 ， 按 Enter 键 后 ， 就 会 
生成 一 个 段落 。 编 辑 段落 主要 是 对 网 页 中 的 一 段 文本 进行 设置 。 
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1. 设置 段落 格式 


使 用 【属性 】 面 板 中 的 【格式 】 下 拉 列 表 框 ， 或 选择 【格式 】 一 【段落 格式 】 菜 单 命 
令 ， 都 可 以 设置 段落 格式 。 其 操作 步骤 如 下 。 

EEJDe 将 光标 放置 在 段落 中 任意 一 个 位 置 ， 或 选中 段落 中 的 一 些 文本 ， 如 图 4-42 所 示 。 

EEJRPp 选择 【格式 】 一 【段落 格式 】 子 菜单 中 的 命令 ， 如 图 4-43 所 示 。 


全 so xs -em be 








牵 例 名 称 贸易 交易 平台 
开发 语言 ，Java 
说 明 ， 商 品 留 县 交易 平台 - 主要 是 礼品 贸易 








Jsp 可 EE SEE 
图 4-42 选中 文本 图 4-43 选择 【段落 格式 】 子 菜单 命令 
mB 
A 在 【属性 】 面 板 的 【格式 〗 下 拉 列 表 框 中 选择 任 一 选项 ， 如 图 4-44 
所 示 


























图 4-44 【属性 】 面 板 


EB 选择 一 个 段落 格式 (如 【标题 1】)， 然 后 单 击 【 拆 分 】 按 钮 ， 在 代码 视图 下 可 以 
看 到 与 所 选 格式 关联 的 HTML 标记 (如 表示 【标题 1】 的 hl、 表 示 【 预 先 格式 化 
的 】 文 本 的 pre 等 ) 将 应 用 于 整个 段落 ， 如 图 4-45 所 示 。 

ES 在 段落 格式 中 对 段落 应 用 标题 标记 时 ，Dreamweaver 会 自动 添加 下 一 行文 本 作 
为 标准 段落 ， 如 图 4-46 所 示 。 














“设置 段落 格式 
Ee 
开发 语言 ，Jaa 
和 商品 慷 易 容易 平台 .主要 是 礼品 贸 
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图 4-45 查看 段落 代码 图 4-46 添加 段落 标记 
mn 若 要 更 改 已 设置 的 段落 标记 ， 可 以 选择 【编辑 】〗】 一 【首选 参数 〗 菜 单 命 令 ， 


< 弹出 【首选 项 〗 对 话 框 ， 然 后 在 【常规 】 分 类 中 的 【编辑 选项 〗 区 域 中 ， 撤 选 
【标题 后 切换 到 普通 段落 】〗 复 选 框 即 可 ， 如 图 4-47 所 示 。 


2. 定义 预 格式 化 


在 Dreamweaver 中 ， 不 能 连续 地 输入 多 个 空格 。 在 显示 一 些 特殊 格式 的 段落 文本 (如 诗歌 ) 制 


时 ， 这 一 点 就 会 显得 非常 不 便 ， 如 图 4-48 所 示 。 
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图 4-47 【首选 项 】 对 话 框 图 4-48 输入 空格 后 的 段落 显示 效果 容 


在 这 种 情况 下 ， 可 以 使 用 预 格式 化 标签 <p> 和 </p> 解 决 该 问题 。 


预 格式 化 指 的 是 预先 对 <p> 和 </p> 之 间 的 文字 进行 格式 化 ， 这 样 浏览 器 在 显 
并 示 其 中 的 内 容 时 ， 就 会 完全 按照 真正 的 文本 格式 来 显示 ， 即 原封 不 动 地 保留 文档 
中 的 空白 ， 如 空格 及 制 表 符 等 ， 如 图 4-49 所 示 。 


在 Dreamweaver 中 ， 设 置 预 格式 化 段落 的 具体 步骤 如 下 。 


= 
二 提示 


罗 GG 





ERD 将 光标 放置 在 要 设置 预 格式 化 的 段落 中 ， 如 图 4-50 所 示 。 
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图 4-49 ” 预 格式 化 的 文字 


国 T2Y 按 CtltF3 组 合 键 打开 【属性 】 面 板 ， 在 
【格式 】 下 拉 列 表 框 中 选择 【预先 格式 化 的 】 
选项 ， 如 图 4-51 所 示 。 
Em 如 果 要 将 多 个 段落 设置 为 预 格式 化 ， 则 可 
站。 同时 选中 多 个 段落 ， 如 图 4.52 所 示 。 


ys 选择 【格式 】〗】 一 【段落 格式 】〗 一 【已 纺 


SN。 排 格式 】 菜 单 命令 ， 也 可 以 实现 段落 的 预 格 
式 化 ， 如 图 4-53 所 示 。 





陋 8 时 节 而 纷纷 


路 上 行人 谷 断 魂 


4-50 ”选择 需要 预 格式 化 的 段落 








图 4-51 选择 【预先 格式 化 的 】 选 项 
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EE E20 Ctrl+AR+] 

于 FA) > 
列表 0 

HTML 样式 (H) 

| 

< wi 
图 4-52 选中 多 个 段落 图 4-53 选择 【已 编排 格式 】 菜 单 命令 
全 该 操作 会 自动 地 在 相应 段落 的 两 端 添加 <pre> 和 </pre> 标 记 。 如 果 原 来 段落 的 


i 二 两 端 有 <p> 和 </p> 标 记 ， 则 会 分 别 用 <pre> 和 </pre> 标 记 将 其 替换 ， 如 图 4-54 所 示 。 


人 由 于 预 格式 化 文本 不 能 自动 换行 ， 因 此 除非 绝对 需要 ， 否 则 尽量 不 要 使 用 预 


二 提示 
SN 格式 化 功能 。 


EEC 如 果 要 在 段 首 空 出 两 个 空格 ， 不 能 直接 在 【设计 】 视 图 方式 下 输入 空格 ， 必 须 
切换 到 【代码 】 视 图 中 ， 在 段 首 文字 之 前 输入 代码 &nbsp;， 如 图 4-55 所 示 。 

























































二 日 画 uwreused-z 口 
可 区 E53 中 区 清明 时 节 十 纳 纷 
| 孜 史 ‘ead> jp 
EE 四 :i 
草 | 
33 四 
加 Be 回  ， 贡 全 
EE a </body> 
目 > Bes 
图 加 
加 | za + we - LC ERE 
图 4-54 添加 段落 标记 <pre> 图 4-55 在 【代码 】 视 图 中 输入 空格 代码 
加 YY 该 代码 只 表示 一 个 半角 字符 ， 要 空 出 两 Ss 
个 汉字 的 位 置 ， 需要 添加 4 个 代码 。 这 样 ， 司 c\Users\qiangu\Doc 只 - 上 | 是 无 标本 文档 


在 浏览 器 中 就 可 以 看 到 段 首 已 经 空 两 个 格 HD NRE BV dN RT Nl) 
了 ， 如 图 4-56 所 示 。 清明 时 节 雨 纷纷 








路 上 行人 欲 断 现 
3. 设置 段落 的 对 齐 方式 
段落 的 对 齐 方式 指 的 是 段落 相对 文件 窗口 (或 浏览 
器 窗口 ) 在 水 平 位 置 的 对 齐 方式 ， 有 4 种 对 齐 方式 ， 即 
左 对 齐 、 居 中 对 齐 、 右 对 齐 和 两 端 对 齐 。 图 4-56 设置 段落 首 行 缩 进 格 式 


对 齐 段落 的 具体 操作 步骤 如 下 。 


EC 将 光标 放置 在 要 设置 对 齐 方式 的 段落 中 。 如 果 要 设置 多 个 段落 的 对 齐 方式 ， 则 
选择 多 个 段落 ， 如 图 4-57 所 示 。 


ESUP9 进行 下 列 操作 之 一 。 


(1) 选择 【格式 】 一 【对 齐 】 菜 单 命令 ,然后 从 子 菜单 中 选择 相应 的 对 齐 方 式 ， 如 图 4-58 


所 示 。 
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图 4-57 选择 多 个 段落 
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4-58 选择 段落 的 对 齐 方式 


(2) 单 击 【属性 】 面 板 中 的 对 齐 按钮 ， 如 图 4-59 所 示 。 














大 小 G) 

















图 4-59 【属性 】 面 板 


可 供 选择 的 按钮 有 4 个 ， 其 含义 如 下 。 


e@ ”【 左 对 齐 】 按 钮 天 单 击 该 按钮 ， 可 以 设置 段落 相对 文档 窗口 向 左 对 齐 ， 如 图 4-60 


所 示 。 


。 【居中 对 齐 】 按 铅 矢 |， 单 击 该 按钮 ， 可 以 设置 段落 相对 文档 窗口 居中 对 齐 ， 如 图 4-61 


所 示 。 
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4-60 段落 向 左 对 齐 





图 4-61 段落 居中 对 齐 


e。 【 右 对 齐 】 按 钮 图 : 单 击 该 按钮 ， 可 以 设置 段落 相对 文档 窗口 向 右 对 齐 ， 如 图 4-62 


所 示 。 


e。 【两 端 对 齐 】 按 钮 车 |， 单 击 该 校 钮 ， 可 以 设置 段落 相对 文档 窗口 向 两 端 对 齐 ， 如 


图 4-63 所 示 。 
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图 4-62 段落 向 右 对 齐 图 4-63 段落 向 两 端 对 齐 


4. 设置 段落 缩 进 

在 强调 一 段 文字 或 引用 其 他 来 源 的 文字 时 ， 需 要 对 文字 进行 段落 缩 进 ， 以 表示 和 普通 段 
落 有 区 别 。 缩 进 主要 是 指 内 容 相对 于 文档 窗口 (或 浏览 器 窗口 ) 左 端 产生 的 间距 。 

实现 段落 缩 进 的 具体 操作 步骤 如 下 。 

EC 将 光标 放置 在 要 设置 缩 进 的 段落 中 。 如 果 要 缩 进 多 个 段落 ， 则 选中 多 个 段落 ， 









































如 图 4-64 所 示 。 
SS 选择 【格式 】 一 【 缩 进 】 菜 单 命 令 ， 即 可 将 当前 段落 往 右 缩 进 一 段位 置 ， 如 
图 4-65 所 示 。 
男 cVuserwqianowpocumenty 渍 HRVuntilled-zhmh -Dx 函 cuseremiangApocumentsvBAEWnrile4zhm -Ox 
[wenn 人 ldoctype RED i 
z 4 
岂 | opr te charsecorutf -gn, SEEI 
图 E Se /title> ee | 
om oa HEGEEEEG 
epsontext_ ou lett lolaote, 
4 1 < 
四 路 上 行人 侈 断 兆 <Jp> ‘<p style="text-align: 
re ee left 人 
3 汪汪 
加 | snes i tt ee 
-oo a 
vdyy 日 副 加 | 20 ev | se eblechenete 利 同 200 x 325~ 
图 4-64 选中 多 个 段落 4-65 ”段落 缩 进 


单 击 【 属 性 】 面 板 中 的 【删除 内 缩 区 块 】 按 钮 庆 和 【 内 缩 区 块 】 按 钮 名， 即 可 实现 当前 
段落 的 凸 出 和 缩 进 。 凸 出 是 将 当前 段落 向 左 恢复 一 段 缩 进位 置 。 


En 按 Ctrl+Alt+] 组 合 键 可 以 进行 一 次 右 缩 进 ， 按 Ctrl+Alt+[ 组 合 键 可 以 向 左 恢复 
SS 一段 缩 进位 置 。 


4.2.7 ”案例 12 一 一 创建 项 目 列表 


列表 就 是 那些 具有 相同 属性 元 素 的 集合 。Dreamweaver CC 中 常用 的 列表 有 无 序列 表 和 有 
序列 表 两 种 。 无 序列 表 使 用 项 目 符号 来 标记 无 序 的 项 目 ， 有 序列 表 使 用 编号 来 记录 项 目的 











重 
1 国 图 
| 


顺序 。 





1. 无 序列 表 


在 无 序列 表 中 ， 各 个 列表 项 之 间 没有 顺序 级 别 之 分 ， 通 常 使 用 一 个 项 目 符号 作为 每 个 列 
表 项 的 前 级 。 

设置 无 序列 表 的 具体 步骤 如 下 。 

EDp 将 光标 放置 在 需要 设置 无 序列 表 的 文档 中 ， 如 图 4-66 所 示 。 

ECSRP9 选择 【格式 】 一 【列表 】 一 【项 目 列表 】 菜 单 命令 ， 如 图 4-67 所 示 。 





于 如 则 玉 时 上 着 站 王府 一 呈 恒 二 | 并 要 部 方 焉 世 册 





图 4-66 设置 无 序列 表 图 4-67 选择 【项 目 列表 】 菜 单 命令 


ECERB9 光标 所 在 的 位 置 将 出 现 默认 的 项 目 符号 ， 如 图 4-68 所 示 。 
EC 重复 以 上 步骤 ， 设 置 其 他 文本 的 项 目 符号 ， 如 图 4-69 所 示 。 


函 unuued-r Sn 


pp GG 

















画 画 416 x 25v 


图 4-68 添加 无 序 的 项 目 符号 图 4-69 ” 带 有 项 目 符号 的 无 序列 表 
2. 有 序列 表 
对 于 有 序 编号 ， 可 以 指定 其 编号 类 型 和 起 始 编号 。 其 编号 可 以 采用 阿拉 伯 数 字 、 大 写字 
母 或 罗马 数字 等 。 
设置 有 序列 表 的 具体 步骤 如 下 。 


EGRDp 将 光标 放置 在 需要 设置 有 序列 表 的 文档 中 ， 如 图 4-70 所 示 。 
EEC 选择 【格式 】 一 【列表 】 一 【编号 列表 】 菜 单 命令 ， 如 图 4-71 所 示 。 
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图 4-70 设置 有 序列 表 图 4-71 选择 【编号 列表 】 菜 单 命令 


光标 所 在 的 位 置 将 出 现 编号 列表 ， 如 图 4-72 所 示 。 
EC 重复 以 上 步 又， 设置 其 他 文本 的 编号 列表 ， 如 图 4-73 所 示 。 
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图 4-72 设置 有 序列 表 图 4-73 有 序列 表 效 果 
列表 还 可 以 嵌 套 ， 嵌 套 列 表 是 指 一 个 列表 中 还 包含 有 其 他 列表 的 列表 。 设 置 嵌 套 列表 的 
操作 步骤 如 下 。 
EEC 寺 中 要 殿 套 的 列表 项 。 如 果 有 多 行文 本 需要 嵌 套 ， 则 需要 选中 多 行文 本 ， 如 图 4-74 
所 示 。 
EECRD) 单 击 【属性 】 面 板 中 的 【 缩 进 】 按 钮 疼 ， 选 择 【格式 】 一 【 缩 进 】 菜 单 命 令 ， 
如 图 4-75 所 示 。 








工商 品 广告 设计 
2. 公益 广告 设计 
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图 4-74 ”列表 嵌 套 效果 图 4-75 【属性 】 面 板 


SR 在 【属性 】 面 板 中 直接 单 击 固 或 国 按钮 ， 可 以 将 选 定 的 文本 设置 成 项 目 (天 


A 局 列 表 或 编号 有 序 ) 列 表 。 


4.3 ”使 用 特殊 文本 添加 网 页 内 容 


除了 使 用 文字 添加 网 页 内 容 外 ， 用 户 还 可 以 在 网 页 中 通过 插入 其 他 元 素来 丰富 网 页 内 
容 ， 如 水 平 线 、 日 期 、 特 殊 字 符 等 。 


4.3.1 案例 13 一 一 插入 换行 符 


在 输入 文本 的 过 程 中 ， 换 行 时 如 果 直 接 按 Enter 键 ， 行 间距 会 比较 大 。 一 般 情 况 下 ， 在 网 
页 中 换行 时 按 Shift + Enter 组 合 键 才 是 正常 的 行距 。 

也 可 以 在 文档 中 添加 换行 符 来 实现 文本 换行 ， 有 以 下 两 种 操作 方法 。 

(1) 选择 【窗口 】 一 【插入 】 菜 单 命令 ,打开 【插入 】 面 板 ， 然 后 单 击 【 字 符 】 图 标 ， 
在 弹出 的 列表 中 选择 【换行 符 】 选 项 ， 如 图 4-76 所 示 。 

(2) 选择 【插入 】 一 【字符 】 一 【换行 符 】 菜 单 命令 ， 如 图 4-77 所 示 。 
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图 4-76 选择 【换行 符 】 选 项 图 4-77 选择 【换行 符 】 菜 单 命令 





4.3.2 ”案例 14 一 一 插入 水 平 线 


网 页 文档 中 的 水 平 线 主要 用 于 分 隔 文档 内 容 ， 使 文档 结构 清晰 明了 ， 便 于 浏览 。 在 文档 
中 插入 水 平 线 的 具体 操作 步骤 如 下 。 
EE 在 Dreamweaver CC 的 编辑 窗口 中 ， 将 光标 置 于 要 插入 水 平 线 的 位 置 ， 选 择 【 插 
入 】 一 【水 平 线 】 菜 单 命令 ， 如 图 4-78 所 示 。 
GET 即 可 在 文档 窗口 中 插入 一 条 水 平 线 ， 如 图 4-79 所 示 。 
ETE> 在 【属性 】 面 板 中 ， 将 【 宽 】 设 置 为 710，【 高 】 设 置 为 5，【 对 齐 】 设 置 为 
【默认 】， 并 选中 【阴影 】 复 选 框 ， 如 图 4-80 所 示 。 
ET 保存 页 面 后 按 F12 键 ， 即 可 预览 插入 的 水 平 线 效果 ， 如 图 4-81 所 示 。 


瑞 可 河 到 帅 首 计 冷 注 集 一 一 沼 到 店 | 猴 恕 浊 认 赴 山 了 名 全 
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图 4-78 选择 【水 平 线 】 菜 单 命令 4-79 ”插入 的 水 平 线 效果 
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图 4-80 【属性 】 面板 图 4-81 预览 网 页 
4.3.3 ”案例 15 一 一 插入 日 期 


向 网 页 中 插入 系统 当前 日 期 的 具体 方法 有 以 下 两 种 。 

(1) 在 文档 窗口 中 ， 将 插入 点 放 到 要 插入 日 期 的 位 置 。 选 择 【 插 入 】 一 【日 期 】 菜 单 命 
令 ， 如 图 4-82 所 示 。 

(2) 单 击 【 插 入 】 面 板 【 常 用 】 选 项 卡 中 的 【日 期 】 图 标 | 图 |， 如 图 4-83 所 示 。 
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图 4-82 选择 【日 期 】 菜 单 命令 图 4-83 【常用 】 选 项 卡 


完成 上 述 任 一 种 操作 后 ， 可 按 以 下 步骤 操作 。 

EC 弹出 【插入 日 期 】 对 话 框 ， 从 中 分 别 设置 【星期 格式 】、【 日 期 格式 】 和 【时 
间 格 式 】， 并 选中 【储存 时 自动 更 新 】 复 选 框 ， 如 图 4-84 所 示 。 

EEC 单 击 【 确 定 】 按 钮 ， 即 可 将 日 期 插入 到 当前 文档 中 ， 如 图 4-85 所 示 。 
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插入 日 期 3 EE -| 
Cw | 
时 间 格 式 - 
图 4-84 【插入 日 期 】 对 话 框 图 4-85 插入 的 日 其 





4.3.4 ”案例 16 一 一 插入 特殊 字符 


在 Dreamweaver CC 中 ， 有 时 需要 插入 一 些 特殊 字符 ， 如 版 权 符号 和 注册 商标 符号 等 。 插 
入 特殊 字符 的 具体 操作 步骤 如 下 。 
EEJD 将 光标 放 到 文档 中 需要 插入 特殊 字符 (这 里 输入 的 是 版 权 符号 ) 的 位 置 ， 如 图 4-86 
所 示 。 
EEJD 选择 【插入 】 一 【字符 】 一 【版 权 】 菜 单 命 令 ， 即 可 插入 版 权 符号 ， 如 图 4-87 
所 示 。 


二 cowraqangi Document enttied Lhtml 


瑞 可 沼 到 帅 首 讨 冷 注 集 一 一 测 到 店 | 潍 恕 架 市 二 山上 名 全 
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Cer] CRE EYED ow oy 间 间 套 44: mv 
图 4-86 定位 插入 特殊 符号 的 位 置 4-87 ”插入 的 特殊 符号 


如 果 在 【字符 】 子 菜单 中 没有 需要 的 字符 ， 则 可 通过 选择 【插入 】 一 【字符 】 一 
【其 他 字符 】 菜 单 命令 ,打开 【插入 其 他 字符 】 对 话 框 ， 如 图 4-88 所 示 。 
革 于 BY 单 击 需 要 插入 的 字符 ， 该 字符 就 会 出 现在 【插入 】 文 本 框 中 ， 如 图 4-89 所 示 。 
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图 4-88 【插入 其 他 字符 】 对 话 框 图 4-89 选择 要 插入 的 字符 
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单 击 【 确 定 】 按 钮 ， 即 可 将 该 字符 插入 到 文档 中 ， 如 图 4-90 所 示 。 
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4-90 ”插入 的 特殊 字符 


4.4 综合 案例 一 一 制作 图 文 并 茂 的 网 页 

















本 实例 讲述 如 何在 网 页 中 插入 文本 和 图 像 ， 并 对 网 页 中 的 文本 和 图 像 进行 相应 的 排版 ， 
以 形成 图 文 并 茂 的 网 页 。 
其 具体 的 操作 步骤 如 下 。 
EEC 打开 资源 文件 中 的 “ch04\ 制 作 图 文 并 茂 的 网 页 \index.htm” 文 件 ， 如 图 4-91 所 
示 。 
人 然后 输入 文本 ， 如 图 4-92 所 示 。 









































图 4-91 打开 素材 文件 图 4-92 输入 文本 


EECDRB) 将 光标 放置 在 文本 的 适当 位 置 ， 选 择 【 插 入 】 一 【图 像 】 菜 单 命令 ， 弹 出 【 选 
择 图 像 源 文 件 】 对 话 框 ， 从 中 选择 图 像 文 件 ， 如 图 4-93 所 示 。 

EC 选择 好 后 单 击 【确定 】 按 钮 ， 插 入 图 像 ， 如 图 4-94 所 示 。 

EECJRD) 选择 【窗口 】 一 【属性 】 菜 单 命令 ， 打 开 【 属 性 】 面 板 ， 在 【属性 】 面 板 的 
【替换 】 文 本 框 中 输入 “欢迎 您 的 光临 ! ”， 如 图 4-95 所 示 。 

EECDRD 选 定 所 输入 的 文字 ， 在 【属性 】 面 板 中 设置 【字体 】 为 【宋体 】，【 大 小 】 为 
12， 并 在 中 文 输入 法 的 全 角 状 态 下 ， 设 置 每 个 段落 的 段 首 空 两 个 汉字 的 空格 ， 如 
图 4-96 所 示 。 
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图 4-96 设置 字体 大 小 
ED 保存 文档 ， 按 F12 键 可 在 浏览 器 中 预览 效果 ， 如 图 4-97 所 示 。 


| 四 CVsersigiongu Decnent It NTE Rd -0 司 扩 BR2 
A MME) EBV) cm) IRM Wm 





MP emame 





RE wt 
。 和 所 午 同 村 们 关 
过门 相配 





UR 
和 
和 6 时 关 记 所 

让 一生 入 入 
四 
en 





进 问 天 全 的 攻 -再 亲 二 全 | 。 七 责 拉 伍 时 四 各 六 双关 本 的 直击 








UB 全 RR 
NE 
3 





He 
加 3 作 二 必 了 :日 

















河 副 让 | 涛 于 凡 刘 二、 吉 渤 展 


珊 卫 沼 到 时 首 计 冷 玉 谷 








Dreamweaver CC 动态 网 站 开发 
案例 课堂 (第 2 版 )»~ 





4.5 疑难 解 惑 


疑问 1: 如 何 添加 页 面 标题 ? 

答 : 常见 添加 页 面 标题 的 方法 有 以 下 两 种 。 

(1) 在 工作 主 界面 添加 标题 。 在 Dreamweaver CC 工作 界面 中 ， 在 【标题 】 文 本 框 中 输入 
页 面 标题 即 可 ， 这 里 输入 “这 是 新 添加 的 标题 ”， 如 图 4-98 所 示 。 

(2) 使 用 代码 添加 页 面 标题 。 在 代码 视图 中 ， 使 用 <title> 标 签 可 以 添加 页 面 的 标题 ， 如 


图 4-99 所 示 。 
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图 4-99 在 代码 视图 中 添加 页 面 标题 
疑问 2: 如 何 理 解 外 观 (CSS) 和 外 观 (HTML) 的 区 别 ? 


答 : 如果 使 用 外 观 (CSS) 分 类 设置 页 面 属性 ， 程 序 会 将 设置 的 相关 属性 代码 生成 CSS 样 
式 。 如 果 使 用 外 观 (HTML) 分 类 设置 页 面 属性 ， 程 序 会 自动 将 设置 的 相关 属性 代码 添加 到 页 面 
文件 的 主体 <body> 标 签 中 。 


第 5 章 
有 图 有 真相 一 
使 用 图 像 与 多 媒体 

网 页 元 素 


在 设计 网 页 的 过 程 中 ， 单 纯 的 文本 无 法 表现 出 更 形象 、 更 具 视觉 冲击 力 的 效 
果 。 图 像 和 多 媒体 能 使 网 页 的 内 容 更 加 丰富 多 彩 、 形 象 生 动 ， 可 以 为 网 页 增色 很 
多 。 本 章 重点 学 习 图 像 和 多 媒体 的 使 用 方法 和 技巧 。 
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5.1 常用 图 像 格式 


图 像 文 件 的 格式 非常 多 ， 如 GIF、JPEG、PNG、BMP 等 。 虽 然 这 些 格 式 都 能 插入 网 页 之 
中 ， 但 为 适应 网 络 传输 以 及 浏览 的 要 求 ， 在 网 页 中 最 常 使 用 的 图 像 格式 有 3 种 ， 即 GIF、 
JPEG 和 PNG。 


5.1.1 GIF 格式 


网 页 中 最 常用 的 图 像 格式 是 GIF， 它 的 图 像 最 多 可 显示 256 种 颜色 。GIF 格式 的 特点 是 图 
像 文 件 占用 磁盘 空间 小 ， 支 持 透明 背景 和 动画 ， 多 数 用 于 图 标 、 按 钮 、 深 动 条 和 背景 等 。 

GIF 格式 图 像 的 另外 一 个 特点 是 可 以 将 图 像 以 交错 显示 的 形式 下 载 。 交 错 显示 就 是 当 图 
像 尚未 下 载 完 成 时 ， 浏 览 器 显示 的 图 像 会 由 不 清晰 慢 慢 变 清晰 到 下 载 完成 。 图 5-1 所 示 为 GIF 


格式 的 图 像 。 






图 5-1 GIF 格式 的 图 像 示例 


5.1.2 JPEG 格式 


JPEG 格式 是 一 种 图 像 压缩 格式 ， 支 持 大 约 1670 万 种 颜色 。 它 主要 应 用 于 摄影 图 片 的 存 
储 和 显示 ， 尤 其 是 色彩 丰富 的 大 自然 照片 ， 其 文件 的 扩展 名 为 :jpg 或 jpeg。 和 GIF 格式 文件 
不 同 ，JPEG 格式 文件 的 压缩 技术 十 分 先进 ， 它 使 用 有 损 压 缩 的 方式 去 除 元 余 的 图 像 和 色彩 数 
据 ， 在 获取 极 高 压缩 率 的 同时 ， 能 展现 十 分 丰富 、 生 动 的 图 像 。 它 在 处 理 颜 色 和 图 形 细节 方 
面 比 GIF 文件 要 好 ， 在 复杂 微 标 和 图 像 镜像 等 方面 应 用 得 更 为 广泛 ， 特 别 适合 在 网 上 发 布 昭 


片 。 图 5-2 所 示 为 JPEG 格式 的 图 像 。 






5-2 ”JPEG 格式 的 图 像 示例 


本 证 


GIF 格式 文件 和 JPEG 格式 文件 各 有 优点 ， 应 根据 实际 的 图 片 文件 来 决定 采用 哪 种 格式 。 
这 两 种 文件 的 特点 对 比如 表 5-1 所 示 。 


表 5-1 GIF 和 JPEG 格式 文件 对 比 


关 几 直下 让 由 5 周二 














项 目 GIF JPEG/JPG 
色彩 16 色 、256 色 真 彩 色 
特殊 功能 透明 背景 、 动 画 效果 无 
压缩 是 否 有 损失 | 无 损 压 缩 有 损 压 缩 
适用 面 颜色 有 限 ， 主 要 以 漫画 图 案 或 线条 为 主 ， | 颜色 丰富 ， 有 连续 的 色调 ， 一 般 用 


一 般 用 于 表现 建筑 结构 图 或 手绘 图 于 表现 真实 的 事物 


5.1.3 PNG 格式 


PNG 格式 是 近 几 年 开始 流行 的 一 种 全 新 的 无 显示 质量 损耗 的 文件 格式 。 它 避免 了 GIF 格 
式 文件 的 一 些 缺点 ， 是 一 种 替代 GIF 格式 的 无 专利 权限 的 格式 ， 支 持 索引 色 、 灰 度 、 真 彩色 
图 像 以 及 Alpha 透明 通道 。 PNG 格式 是 Fireworks 固有 的 文件 格式 。 

PNG 格式 汲取 了 GIF 格式 和 JPEG 格式 的 优点 ， 存 储 形式 丰富 ， 兼 有 GIF 格式 和 JPEG 
格式 的 色彩 模式 。 图 5-3 所 示 为 PNG 格式 的 图 像 。 
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图 5-3 PNG 格式 的 图 像 示例 


PNG 格式 能 把 图 像 文件 大 小 压缩 到 极限 ， 以 利于 网 络 的 传输 ， 却 不 失真 。PNG 采用 无 损 
压缩 方式 来 减 小 文件 的 大 小 。PNG 格式 的 图 像 显 示 速 度 快 ， 只 需 下 载 1/64 的 图 像 信息 就 可 以 
显示 出 低 分 辩 率 的 预览 图 像 。PNG 格式 同样 支持 透明 图 像 的 制作 。 

PNG 格式 文件 可 保留 所 有 原始 层 、 向 量 、 颜 色 和 效果 等 信息 ， 并 且 在 任何 时 候 所 有 元 素 
都 是 可 以 完全 编辑 的 。 


5.2 用 图 像 美化 网 页 


无 论 是 个 人 网 站 还 是 企业 网 站 ， 图 文 并 茂 的 网 页 都 能 为 网 站 增色 不 少 。 用 图 像 美化 网 页 
会 使 网 页 变 得 更 加 美观 、 生 动 ， 从 而 吸引 更 多 的 浏览 者 。 
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5.2.1 案例 1 一 一 插入 图 像 


在 文件 中 插入 漂亮 的 图 像 会 使 网 页 更 加 美观 ， 从 而 更 具 吸 引力 。 在 网 页 中 插入 图 像 的 具 
体操 作 步 骤 如 下 。 
EEJDp 新 建 一 个 空白 文档 ， 将 光标 放置 在 要 插入 图 像 的 位 置 ， 在 【插入 】 面 板 的 【 常 
用 】 选 项 卡 中 单 击 【图 像 】 按 钮 ， 在 打开 的 下 拉 列 表 中 选择 【图 像 】 选 项 ， 如 图 5-4 
所 示 。 用 户 也 可 以 选择 【插入 】 一 【图 像 】 一 【图 像 】 菜单 命令 ， 如 图 5-5 所 示 。 
国葬 saw wo ws wat) enw wm 


HIMLS Video) -ColtrAh+ShiRty 
EN) 





图 5-4 【插入 )】 面板 图 5-5 选择 【图 像 】 菜 单 命令 
EEC 打开 【选择 图 像 源 文件 】 对 话 框 ， 从 中 选择 要 插入 的 图 像 文件 ， 然 后 单 击 【 确 
定 】 按 钮 ， 如 图 5-6 所 示 。 
即 可 完成 向 文档 中 插入 图 像 的 操作 ， 如 图 5-7 所 示 。 


| 四 spa 
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J 了 日 
a 
图 5-6 【选择 图 像 源 文件 】 对 话 杠 图 5-7 插入 图 像 


EC 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 效果 ， 如 图 5-8 所 示 。 











5-8 ”预览 网 页 


5.2.2 ”案例 2 一 一 设置 图 像 的 属性 


在 页 面 中 插入 图 像 后 单 击 选 定 的 图 像 ， 此 时 图 像 的 周围 会 出 现 边框 ， 表 示 图 像 正 处 于 选 
中 状态 ， 如 图 5-9 所 示 。 
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5-9 选中 图 像 


可 以 在 【属性 】 面 板 中 设置 该 图 像 的 属性 ， 如 设置 源 文件 、 输 入 蔡 换文 本 、 设 置 图 片 的 
宽 与 高 等 ， 如 图 5-10 所 示 。 

(1) 【地 图 】 选 项 。 

该 选项 用 于 创建 客户 端 图 像 的 热 区 ， 在 右 侧 的 文本 框 中 可 以 输入 【地 图 】 的 名 称 ， 如 
图 5-11 所 示 。 





到 局 EE 
图 各 lL Sre [i 局 ie [元 加 461 着 失 四 a 17k 
， ED a | Pe 
es | GD 了 HRN A -Por a | 
地 图 的) 时 四 bmm | 
NO 王 ee [ciel 
图 5-10 【属性 】 面 板 5-11 图 像 地 图 设置 区 域 


= 
A 输入 的 名 称 中 只 能 包含 字母 和 数字 ， 并 且 不 能 以 数字 开头 。 


(2) 【热点 工具 】 按 钮 时 2b。 

单 击 这 些 按钮 ， 可 以 创建 图 像 的 热 区 链接 。 

G) 【 宽 】 和 【高 】 选 项 。 

这 两 个 选项 用 于 设置 在 浏览 器 中 显示 图 像 的 宽度 和 高 度 ， 以 像素 为 单位 。 比 如 在 【 宽 】 
文本 框 中 输入 宽度 值 ， 页 面 中 的 图 片 即 会 显示 相应 的 宽度 ， 如 图 5-12 所 示 。 


Sn 【 宽 】 和 【高 】 的 单位 除 像素 外 ， 还 有 pc( 十 二 点 活字 )、pt( 点 )、in( 英 寸 )、 
以 mm( 毫 米 )、cm( 厘 米 ) 和 类 似 2in+5mm 的 单位 组 合 等 。 


首 音 醋 本 站 才 9 小 和 
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调整 后 ， 其 文本 框 的 右 侧 将 显示 【 重 设 图 像 大 小 】 按 钮 GJ， 单 击 该 按钮 ， 可 恢复 图 像 到 
原来 的 大 小 。 


(4) Src( 源 文件 ) 选 项 。 


该 选项 用 于 指定 图 像 的 路 径 。 单 击 文本 框 右 侧 的 【浏览 文件 】 按 钮 回 ， 打 开 【 选 择 图 像 
源 文件 】 对 话 框 ， 可 从 中 选择 图 像 文件 ， 如 图 5-13 所 示 。 
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图 5-12 设置 图 像 的 宽 与 高 
(5) 【链接 】 选 项 。 


该 选项 用 于 指定 图 像 的 链接 文件 。 可 拖 动 【 指 向 文件 】 图 标 够 到 【文件 】 面 板 中 的 某 个 
文件 上 ， 或 直接 在 文本 框 中 输入 URL 地 址 ， 如 图 5-14 所 示 。 


图 5-13 【选择 图 像 源 文 件 】 对 话 框 
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图 5-14 【属性 】 面板 
(6) 【目标 】 选 项 。 


该 选项 用 于 指定 链接 页 面 在 框架 或 窗口 中 的 打开 方式 ， 如 图 5-15 所 示 。 
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图 5-15 设置 图 像 【目标 】 
【目标 】 下 拉 列 表 中 有 以 下 几 个 选项 。 
ee 。_blank: 在 打开 的 新 浏览 器 窗口 中 打开 链接 文件 。 


_parent: 如 果 是 嵌 套 的 框架 ， 会 在 父 框架 或 窗口 中 打开 链接 文件 ， 如 果 不 是 嵌 套 的 
框架 ， 则 与 _top 相同， 在 整个 浏览 器 窗口 中 打开 链接 文件 。 


® _self: 在 当前 网 页 所 在 的 窗口 中 打开 链接 。 此 目标 为 浏览 器 默认 的 设置 。 
@ top: 在 完整 的 浏览 器 窗口 中 打开 链接 文件 ， 因 而 会 删除 所 有 的 框架 。 


(7) 【原始 】 选 项 。 


该 选项 用 于 设置 图 像 下 载 完成 前 显示 的 低 质量 图 像 ， 这 里 一 般 指 PNG 图 像 。 单 击 旁边 的 
【浏览 文件 】 按 钮 回 ， 即 可 在 打开 的 对 话 框 中 选择 低 质量 图 像 ， 如 图 5-16 所 示 。 





该 选项 可 设置 图 像 的 说 明 性 文字 ， 用 于 在 浏览 器 不 显示 图 像 时 蔡 代 图 像 显 示 的 文本 ， 如 








(8) 【替换 】 选 项 。 
图 5-17 所 示 。 
Bs 
Eo ER ,rege 可 (aie » 
a 中 -9 
| 攻 ES 
2 eo i 
国 克 a 002jpg 003jpg 
下 
| -二 许 = 
tm 009jpg oo08jp9 orjpg (sjpg 
小 吾 乐 
器 二 Ea 
@ Wdows (0) -SS 9 
mF 0) 下 Wk 2 
Beowmmey pa rr 
tT | 
RN oie [7] 本 
|] 病 











图 5-16 【选择 原始 文件 】 对 话 框 


5.2.3 ”案例 3 一 一 设置 图 像 对 齐 方 式 
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图 5-17 设置 图 像 蔡 换 文本 


图 像 的 对 齐 方式 主要 是 设置 图 像 与 同一 行 中 的 文本 或 另 一 幅 图 像 等 元 素 的 对 齐 方式 。 对 


齐 图 像 的 具体 操作 步骤 如 下 。 


EEDDp 在 文档 窗口 中 选 定 要 对 齐 的 图 像 ， 如 图 5-18 所 示 。 
EEJ2p 过 择 【 格 式 】 一 【对 齐 】 一 【 左 对 齐 】 菜 单 命令 后 ， 效 果 如 图 5-19 所 示 。 
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图 5-18 选择 图 像 


图 5-19 图 像 左 对 齐 


ECDIS 选择 【格式 】 一 【对 齐 】 一 【居中 对 齐 】 菜 单 命令 后 ， 效 果 如 图 5-20 所 示 。 
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EC 远 择 【格式 】 一 【对 齐 】 一 【 右 对齐 】 菜 单 命令 后 ， 效 果 如 图 5-21 所 示 。 
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.A 图 像 的 对 并 方式 主要 是 设 半 图 ' 急 雪 图 入 的 对 齐 方式 主要 是 设置 
像 同 一行 中 的 文本 或 另 一 个 图 人 等 元 条 的 共 划 方式 -| 各 与 局 行 中 的 文本 或 另 一个 图 从 等 和 素 的 对 齐 方式。 
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图 5-20 图 像 居 中 对 齐 图 5-21 图 像 右 对 齐 


5.2.4 ”案例 4 一 一 剪裁 需要 的 图 像 
在 网 页 中 插入 图 像 后 ， 如 果 只 需要 插入 图 像 的 部 分 内 容 ， 此 时 就 可 以 通过 裁剪 功能 裁剪 


需要 的 部 分 ， 具 体 的 操作 步骤 如 下 。 
EEJDp 在 文档 窗口 中 选 定 要 剪裁 的 图 像 ， 如 图 5-22 所 示 。 
EED2 在 【属性 】 面 板 中 单 击 【 裁 剪 】 按 钮 出， 启用 裁剪 工具 ， 如 图 5-23 所 示 。 
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图 5-22 选择 图 像 图 5-23 ” 单 击 【 载 剪 】 按 钮 


被 选中 的 图 像 上 出 现 一 个 黑色 方 框 ， 移 动 该 方 框 到 需要 的 裁剪 图 像 位 置 ， 拖 动 


方 框 四 周 的 控制 点 至 需要 的 图 像 内 容 ， 如 图 5-24 所 示 。 
EEC 调整 好 需要 保留 的 图 像 内 容 后 ， 双 击 鼠 标 左 键 完成 裁剪 操作 ， 如 图 5-25 所 示 。 
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LE ER -TE | aeap na 下 同 301x227 
5-24” 栽 剪 图 像 5-25 ”完成 裁剪 图 像 


区 了 BY 保存 文档 ， 单 击 【预览 】 按 钮 镶 ， 在 弹出 的 下 拉 列表 中 选择 预览 方式 ， 如 图 5-26 





所 示 。 
国 于 BY 启动 下 浏览 器 ， 在 其 中 即 可 查看 到 裁剪 图 片 后 的 效果 ， 如 图 5-27 所 示 。 
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Environmental 
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方式 :IEXPLORE FI2 媒 
编辑 浏览 器 列表 (E).… RS 人 
页 、 
图 5-26 选择 预览 方式 图 5-27 ”预览 裁剪 后 的 图 像 图 


pr 在 确定 需要 保留 的 图 片 内 容 后 ， 直 接 按 下 Enter 键 可 以 快速 执行 裁剪 图 片 


操作。 


5.2.5 ”案例 5 一 一 调整 图 像 的 亮度 与 对 比 度 


在 网 页 中 插入 图 片 后 ， 如 果 发 现 图 片 的 亮度 与 对 比 度 不 符合 需求 ， 可 以 通过 【亮度 /对 比 
度 】 对 话 框 ， 对 其 亮度 与 对 比 度 值 进行 自 定义 调整 ， 具 体 的 操作 步骤 如 下 。 

EEDUDp 在 文档 窗口 中 选 定 要 调整 亮度 与 对 比 度 的 图 像 ， 如 图 5-28 所 示 。 

EEJ2p 在 【属性 】 面 板 中 单 击 【 亮 度 和 对 比 度 】 按 钮 ， 如 图 5-29 所 示 。 
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图 5-28 选择 图 像 图 5-29 单 击 【 亮 度 和 对 比 度 】 按 钮 
EEDRS 打开 【亮度 /对 比 度 】 对 话 框 ， 在 其 中 输入 【亮度 】 与 【对 比 度 】 的 值 ， 或 通过 
调整 “亮度 ”与 “对 比 度 ” 下 方 的 滑 块 来 确定 亮度 与 对 比 度 的 值 ， 如 图 5-30 所 示 。 
EEC 单 击 【 确 定 】 按 钮 ， 完 成 图 像 亮度 与 对 比 度 的 调整 ， 如 图 5-31 所 示 。 
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亮度 /对 比 度 x 
CE 
一 一 [5 
对 EE] 2 人 2 
一 一 一 加 世家 ee 回国 世 4%x287v | 
图 5-30 【亮度 /对 比 度 】 对 话 框 图 5-31 调整 图 像 
ECGRD 保存 文档 ， 单 击 【预览 】 按 钮 ， 在 弹出 的 下 拉 列 表 中 选择 预览 方式 ， 如 图 5-32 
所 示 。 
EEJRD 启动 下 浏览 器 ， 在 其 中 即 可 查看 到 调整 图 像 亮度 与 对 比 度 后 的 效果 ， 如 图 5-33 
所 示 。 
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图 5-32 选择 预览 方式 图 5-33 ”预览 图 像 效 果 


5.2.6 案例 6 一 一 设置 图 像 的 锐 化 效果 


设置 图 像 的 锐 化 效果 可 以 提高 图 像 边缘 轮廓 的 清晰 度 ， 从 而 让 整个 图 像 更 加 清晰 ， 有 具体 
的 操作 步骤 如 下 。 

EEJRD 在 文档 窗口 中 选 定 需要 锐 化 的 图 像 ， 如 图 5-34 所 示 。 

EER29 在 【属性 】 面 板 中 单 击 【 锐 化 】 按 钮 让， 如 图 5-35 所 示 。 

EEJRS 打开 【 锐 化 】 对 话 框 ， 拖 动 滑 块 实时 预览 调整 图 像 的 锐 化 效果 ， 如 图 5-36 所 示 。 

EC 单 击 【 确 定 】 按 钮 ， 完 成 图 像 锐 化 的 调整 ， 如 图 5-37 所 示 。 

EEDRD) 保存 文档 ， 单 击 【了 预览】 按钮 ， 在 弹出 的 下 拉 列 表 中 选择 预览 方式 ， 如 图 5-38 

所 示 。 
启动 正 浏览 器 ， 在 其 中 即 可 查看 到 图 像 设置 锐 化 后 的 效果 ， 如 图 5-39 所 示 。 
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图 5-36 【 锐 化 】 对 话 框 
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图 5-38 选择 预览 方式 
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图 5-37 ”调整 图 像 锐 化 效果 
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图 5-39 ”预览 图 像 效 果 


5.3 ”插入 其 他 图 像 元 素 


在 网 页 中 不 仅 可 以 插入 图 像 文件 ， 还 可 以 插入 其 他 的 图 像 元 素 ， 如 插入 鼠标 经 过 图 像 、 





图 像 占 位 符 、 图 像 热点 区 域 等 。 


济 尖 到 分 注 幅 是 蘑 因 入 兴 一 一 首 籼 十 聘 对 ”性 9 波 全 
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5.3.1 案例 7 一 一 插入 鼠标 经 过 图 像 


鼠标 经 过 图 像 是 指 在 浏览 器 中 查看 并 在 鼠标 指针 移 过 它 时 发 生变 化 的 图 像 。 鼠 标 经 过 图 


像 实际 上 是 由 两 幅 图 像 组 成 ， 即 初始 图 像 (页 面 首 次 加 载 时 显示 的 图 像 ) 和 蔡 换 图 像 (鼠标 指针 
经 过 时 显示 的 图 像 )。 


插入 鼠标 经 过 图 像 的 具体 操作 步骤 如 下 。 


EC 新 建 一 个 空白 文档 ， 将 光标 置 于 要 插入 鼠标 经 过 图 像 的 位 置 ， 选 择 【插入 】 一 
【图 像 】 一 【鼠标 经 过 图 像 】 菜 单 命令 ， 如 图 5-40 所 示 。 





Br 也 可 以 在 【插入 】〗 面 板 的 【常用 】〗 选 项 卡 中 单 击 【图 像 〗 按 钮 ， 然 后 从 弹出 
”的 下 拉 列 表 中 选择 【和 鼠标 经 过 图 像 】 选 项 ， 如 图 5-41 所 示 。 
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图 5-40 ”选择 【鼠标 经 过 图 像 】 菜 单 命令 


图 5-41 选择 【鼠标 经 过 图 像 】 选 项 

EEJR2y 打开 【插入 鼠标 经 过 图 像 】 对 话 框 ， 在 【图 像 名 称 】 文 本 框 中 输入 一 个 名 称 (这 
里 保持 默认 名 称 不 变 )， 如 图 5-42 所 示 。 

EEIRS 单 击 【 原 始 图 像 】 文 本 框 右 侧 的 【浏览 】 按 钮 ， 在 打开 的 【原始 图 像 】 对 话 框 
中 选择 鼠标 经 过 前 的 图 像 文 件 ， 设 置 完 成 后 单 击 【 确 定 】 按 钮 ， 如 图 5-43 所 示 。 
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图 5-42 【插入 鼠标 经 过 图 像 】 对 话 框 
EEC 返回 【插入 鼠标 经 过 图 像 】 对 话 框 


图 5-43 选择 原始 图 像 
， 在 【原始 图 像 】 文 本 框 中 即 可 看 到 添加 的 


Gu" 


原始 图 像 文件 路 径 ， 如 图 5-44 所 示 。 

EEDRD》 单 击 【 鼠 标 经 过 图 像 】 文 本 框 右 侧 的 【浏览 】 按 钮 ， 在 打开 的 【鼠标 经 过 图 
像 】 对 话 框 中 选择 鼠标 经 过 原始 图 像 时 显示 的 图 像 文件 ， 如 图 5-45 所 示 。 然 后 单 击 
【确定 】 按 钮 ， 返 回 【插入 鼠标 经 过 图 像 】 对 话 框 。 
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图 5-44 【插入 鼠标 经 过 图 像 】 对 话 框 5-45 ”选择 鼠标 经 过 图 像 


EEOUD 在 【 蔡 换文 本 】 文 本 框 中 输入 名 称 ( 这 里 不 再 输入 )， 并 选中 【 预 载 鼠 标 经 过 图 
像 】 复 选 框 。 如 果 要 建立 链接 ， 可 以 在 【 按 下 时 ， 前 往 的 URL)】 文本 框 中 输入 URL 
地 址 ， 也 可 以 单 击 其 右 侧 的 【浏览 】 按 钮 选择 链接 文件 (这 里 不 填 )， 如 图 5-46 所 示 。 

EEJU 单 击 【确定 】 按 钮 ， 关 闭 对 话 框 ， 保 存 文档 ， 按 F12 键 在 浏览 器 中 预览 效果 。 
鼠标 指针 经 过 前 的 图 像 ， 如 图 5-47 所 示 。 
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图 5-46 【插入 鼠标 经 过 图 像 】 对 话 杠 图 5-47 ”鼠标 指针 经 过 前 显示 的 图 像 


SSTEY 鼠标 指针 经 过 后 的 图 像 如 图 5-48 所 示 。 
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图 5-48 鼠标 指针 经 过 后 显示 的 图 像 
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5.3.2 ”案例 8 一 一 插入 图 像 占 位 符 


在 布局 页 面 时 ， 有 可 能 需 插入 的 图 像 还 没有 制作 好 。 为 了 整体 页 面 效果 的 统一 ， 此 时 可 
以 使 用 图 像 占 位 符 来 替代 图 片 的 位 置 ， 待 网 页 布局 好 后 ， 再 根据 实际 情况 插入 图 像 。 
插入 图 像 占 位 符 的 操作 步骤 如 下 。 
EC 新 建 一 个 空白 文档 ， 将 光标 置 于 要 插入 图 像 占 位 符 的 位 置 。 切 换 到 代码 视图 ， 
然后 添加 以 下 代码 ， 设 置 图 片 的 宽度 和 高 度 为 550 和 80， 蔡 换文 本 为 “Banner 位 
置 ”， 如 图 5-49 所 示 。 


<img src="" width="550" height="80" alt="Banner 位 置 " /> 


EGR29 切换 到 设计 视图 ， 即 可 看 到 插入 的 图 像 占 位 符 ， 如 图 5-50 所 示 。 
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Untited2 nm x Urata x 

<ldoctype htmt> 

(S50 x 80) 

</head> 

kbody> 

<img src="" width="556" neight="80" alt="Banner 位 置 " /></a> 

</body> 

</html> 

图 5-49 ”代码 视图 图 5-50 设计 视图 


5.3.3 ”案例 9 一 一 插入 图 像 热 点 区 域 


图 像 的 热点 区 域 是 在 一 张 图 片上 的 不 同 部 位 绘制 任意 多 边 形 或 者 图 形 区 域 ， 并 加 入 链接 
的 一 种 方法 ， 在 图 像 中 插入 热点 区 域 的 操作 步骤 如 下 。 

EEJUD 在 文档 窗口 中 选 定 需要 插入 热点 区 域 的 图 像 ， 如 图 5-51 所 示 。 

EEJ2p 在 【属性 】 面 板 中 选择 热点 工具 ， 这 里 选择 多 边 形 工具 ， 如 图 5-52 所 示 。 
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5-51 ”选择 图 像 5-52 ”选择 多 边 形 工具 


在 图 片 的 指定 位 置 处 单 击 添加 一 个 热点 ， 然 后 使 用 相同 的 方法 继续 在 图 片 指定 


EC 在 【属性 】 面 板 中 的 【链接 】 文 本 框 中 设置 该 热 区 需要 链接 的 位 置 ， 这 里 输入 
wlmq.com， 即 链接 到 当前 页 面 ， 如 图 5-54 所 示 。 
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图 5-53 ”绘制 热点 区 域 图 5-54 【属性 】 面板 
ECERD 保存 文档 ， 单 击 【 预 览 】 按 钮 ， 在 弹出 的 下 拉 列 表 中 选择 预览 方式 ， 如 图 5-55 
所 示 。 


EEIUD 启动 卫 浏览 器 ， 在 打开 的 页 面 中 将 鼠标 指针 移动 到 热点 区 域 上 ， 此 时 鼠标 指针 
变 为 手 形 ， 单 击 可 以 执行 链接 跳 转 ， 如 图 5-56 所 示 。 
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图 5-55 选择 预览 方式 图 5-56 预览 图 像 热点 区 域 





5.4 在 网 页 中 插入 多 媒体 


在 网 页 中 插入 多 媒体 是 美化 网 页 的 一 种 方法 ， 常 见 的 网 页 多 媒体 有 背景 音乐 、Flash 动 
画 、FLYV 视频 、HTML5 音频 和 HTMLS5 视频 等 。 
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5.4.1 案例 10 一 一 插入 背景 音乐 


通过 添加 背景 音乐 ， 可 以 使 网 页 一 打开 就 能 听 到 舒适 的 音乐 。 
在 网 页 中 插入 背景 音乐 的 操作 步骤 如 下 。 
EEC 新 建 一 个 空白 文档 ， 切 换 到 代码 视图 ， 然 后 在 <head> 和 </head> 标 记 之 间 添 加 以 
下 人 代码， 设置 背景 音乐 的 路 径 ， 如 图 5-57 所 示 。 
<bgsound src="/ch04/song.mp3"> 
bgsound 标记 的 属性 比较 多 ， 和 包括 src、balance、volume、delay 和 loop。 各 
个 属性 的 含义 如 下 。 
(1) src 属性 : 用 于 设置 音乐 的 路 径 。 
(2) balance 属性 : 用 于 设置 声 道 ， 取 值 范围 为 -1000 一 1000， 其 中 负 值 代表 
左 声 道 ， 正 值 代表 右 声 道 ，0 代表 立体 声 。 
(3) volume 属性 : 用 于 设置 音量 大 小 。 
(4) delay 属性 : 用 于 设置 播放 的 延 时 。 


(5) loop 属性 : 用 于 设置 循环 播放 次 数 ， 其 中 loop=-1， 代 表 音 乐 一 直 循环 
播放 。 


国保 存 网 页 后 ， 单 击 【 预 览 】 按 钮 ， 在 弹出 的 下 拉 列 表 中 选择 预览 方式 ， 启 动 浏 
览 器 即 可 预览 到 效果 ， 如 图 5-58 所 示 。 
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图 5-57 代码 视图 图 5-58 选择 预览 方式 


5.4.2 ”案例 11 一 一 插入 Flash 动画 


Flash 与 Shockwave 电影 相 比 ， 其 优势 是 文件 小 且 网 上 传输 速度 快 。 在 网 页 中 插入 Flash 
动画 的 操作 步骤 如 下 。 

EEJDp 新建 一 个 空白 文档 ， 将 光标 置 于 要 插入 Flash 动画 的 位 置 ， 选 择 【 插 入 】 一 【 媒 
体 】 一 Flash SWF 菜单 命令 ， 如 图 5-59 所 示 。 

EEJ29 打开 【选择 SWF】 对 话 框 ， 从 中 选择 相应 的 Flash 文件 ， 如 图 5-60 所 示 。 

EEJS 单 击 【 确 定 】 按 钮 ， 打 开 【 对 象 标签 辅助 功能 属性 】 对 话 框 ， 输 入 对 象 标 签 辅 
助 的 标题 ， 如 图 5-61 所 示 。 

ED 单 击 【 确 定 】 按 钮 ， 插 入 Flash 动画 ， 然 后 调整 Flash 动画 的 大 小 ， 使 其 适合 网 
页 ， 如 图 5-62 所 示 。 

保存 文档 ， 按 F12 键 在 浏览 器 中 预览 效果 ， 如 图 5-63 所 示 。 
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5-59 选择 Flash SWF 菜单 命令 图 5-60 【选择 SWF】 对 话 框 
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图 5-61 【对 象 标签 辅助 功能 属性 】 对 话 框 图 5-62 ”调整 网 页 动画 











图 5-63 ”预览 网 页 动画 


5.4.3 ”案例 12 一 一 插入 FLV 视频 


用 户 可 以 向 网 页 中 轻松 地 添加 FLV 视频 ， 而 无 须 使 用 Flash 创作 工具 。 在 开始 操作 之 
前 ， 必 须 有 一 个 经 过 编码 的 FLV 文件 。 
新 建 一 个 空白 文档 ， 将 光标 置 于 要 插入 FLV 视频 的 位 置 ， 选 择 【 插 入 】 一 【 媒 
体 】 一 Flash Video 菜单 命令 ， 如 图 5-64 所 示 。 


Dreamweaver Ss 
案例 课堂 (第 2 版 ) 罗 一 


EGGE29 打开 【插入 FLV】 对 话 框 ， 从 【视频 类 型 】 下 拉 列 表 框 中 选择 视频 类 型 ， 这 里 
选择 【累进 式 下 载 视频 】 选 项 ， 如 图 5-65 所 示 。 
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图 5-64 选择 Flash Video 菜单 命令 5-65 【插入 FLV】 对 话 杠 
人 “累进 式 下 载 视频 ”是 将 FLV 文件 下 载 到 站 点 访问 者 的 硬盘 上 后 播放 。 但 


提示 
AS 是 ， 与 传统 的 “下 载 并 播放 ”视频 传送 方法 不 同 ， 累 进 式 下 载 允许 在 下 载 完成 之 


前 就 开始 播放 视频 文件 。 也 可 以 选择 【 流 视 频 〗 选 项 ， 选 择 此 选项 后 下 方 的 选项 
区 域 也 会 随 之 发 生变 化 ， 接 着 可 以 进行 相应 的 设置 ， 如 图 5-66 所 示 。 
“ 流 视频 ”对 视频 内 容 进行 流 式 处 理 ， 并 在 一 段 可 确保 流畅 播放 的 很 短 的 缓 
人” 冲 时 间 后 在 网 页 上 播放 该 内 容 。 
EEJep 在 URL 文本 框 右 侧 单 击 【浏览 】 按 钮 ， 即 可 在 打开 的 【选择 FLV】 对 话 框 中 选 
择 要 插入 的 FLV 文件 ， 如 图 5-67 所 示 。 
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图 5-66 ”选择 【 流 视频 】 选 项 图 5-67 【选择 FLV】 对 话 框 


EC 返回 【插入 FLV】 对 话 框 ， 在 【外 观 】 下 拉 列 表 框 中 选择 设置 显示 出 来 的 播放 
器 外 观 ， 如 图 5-68 所 示 。 

EEIR9) 接着 设置 【宽度 】 和 【高 度 】， 并 选中 【限制 高 宽 比 】、【 自 动 播放 】 和 【 自 
动 重新 播放 】 等 3 个 复 选 框 ， 完 成 后 单 击 【确定 】 按 钮 ， 如 图 5-69 所 示 。 
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图 5-68 选择 外 观 图 5-69 设置 FLV 的 高 度 与 宽度 
Sen “包括 外 观 ” 是 FLV 文件 的 宽度 和 高 度 与 所 选 外 观 的 宽度 和 高 度 相 加 得 出 
外 的 和 。 
EEJRD 单 击 【 确 定 】 按 钮 ， 关 闭 对 话 框 ， 即 可 将 FLV 文件 添加 到 网 页 上 ， 如 图 5-70 
所 示 。 
保存 页 面 后 按 F12 键 ， 即 可 在 浏览 器 中 预览 效果 ， 如 图 5-71 所 示 。 
[ 画 cNusrnqanoupoaumeneHiSNunated-zhtm = 百 苇 
IRE wwfobjoct_modifind js CWsers lergu\Dorumere 用 "上 | B Ti a 4 
EXHIBITON 
hody> Kob ToctHPLY?Laver] 可 加 二 | 1 :31 3 
5-70 ”在 网 页 中 插入 FLV 图 5-71 预览 网 页 


5.4.4 ”案例 13 一 一 插入 HTML5 音频 


Dreamweaver CC 支持 插入 HIMLS 音频 的 功能 。 在 网 页 中 插入 HIMLS 音频 的 操作 步 又 
如 下 。 

EC 新 建 一 个 空白 文档， 将 光标 置 于 要 插 HTML5 音频 的 位 置 ， 选 择 【 插 入 】 一 【 媒 
体 】 一 HTML5 Audio 菜单 命令 ， 如 图 5-72 所 示 。 

EEJRP2p 即 可 看 到 插入 一 个 音频 图 标 ， 在 【属性 】 面 板 中 单 击 【 源 】 右 侧 的 【浏览 〗】 按 
钮 ， 如 图 5-73 所 示 。 

EEe 打开 【选择 音频 】 对 话 框 ， 选 择 资源 文件 中 的 “\chos\vsongmp3” 文 件 ， 单 击 
【确定 】 按 钮 ， 如 图 5-74 所 示 。 
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5-72 选择 HTML5 Audio 菜单 命令 


图 5-73 【属性 】 面 板 


EEC 返回 到 设计 视图 中 ， 保 存 网 页 后 单 击 【 预 览 】 按 钮 ， 在 弹出 的 下 拉 列 表 中 选择 
预览 方式 ， 如 图 5-75 所 示 。 
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图 5-74 【选择 音频 】 对 话 框 图 5-75 选择 预览 方式 


EEJRDp 启动 浏览 器 即 可 预览 到 效果 ， 用 户 可 以 控制 播放 属性 和 声音 大 小 ， 如 图 5-76 所 示 
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图 5-76 查看 预览 效果 
5.4.5 ”案例 14 一 一 插入 HTML5 视频 


Dreamweaver CC 支持 插入 HIMLS 视频 的 功能 。 在 网 页 中 插入 HIMLS 视频 的 操作 步 又 
如 下 。 


EEC 新 建 一 个 空白 文 要 ， 将 光标 置 于 要 插 HTMLS 视频 的 位 置 ， 选 择 【 插 入 】 一 【 媒 
体 】 一 HTMLS5 Video 菜单 命令 ， 如 图 5-77 所 示 。 
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国 T23 即 可 看 到 插入 一 个 视频 图 标 ， 在 【属性 】 面 板 中 单 击 【 源 】 右 侧 的 【浏览 】 按 号 
钮 ， 如 图 5-78 所 示 。 
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图 5-77 选择 HTML5 Video 菜单 命令 图 5-78 【属性 】 面 板 到 

素 


EEJRS9 打开 【选择 视频 】 对 话 框 ， 选 择 资源 文件 中 的 “\ch04\123.mp4 ”文件 ， 单 击 
【确定 】 按 钮 ， 如 图 5-79 所 示 。 

EEJRS 返回 到 设计 视图 中 ， 保 存 网 页 后 ， 单 击 【 预 览 】 按 钮 ， 在 弹出 的 下 拉 列 表 中 选 
择 预览 方式 ， 如 图 5-80 所 示 。 
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图 5-79 【选择 视频 】 对 话 框 图 5-80 ”选择 预览 方式 
EEJDp 启动 浏览 器 即 可 预览 到 效果 ， 用 户 可 以 控制 播放 属性 和 声音 大 小 ， 如 图 5-81 所 示 。 
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图 5-81 查看 预览 效果 
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5.5 ”综合 案例 1 一 一 制作 精彩 的 多 媒体 网 页 


一 个 网 页 中 可 以 包括 多 种 网 页 元 素 ， 如 文本 、 图 像 、 视 频 、 动 画 等 。 使 用 Dreamweaver 
CC， 用 户 可 以 制作 包含 多 种 元 素 的 多 媒体 网 页 。 下 面 介 绍 创建 多 媒体 网 页 的 操作 方法 与 
步骤 。 

EEC 启动 Dreamweaver CC， 选 择 【 文 件 】 一 【新 建 】 菜 单 命令 ， 创 建 一 个 空白 网 页 

文档 ， 如 图 5-82 所 示 。 

EECRPD 选择 【插入 】 一 【图 像 】 一 【图 像 】 菜 单 命令 ， 打 开 【 选 择 图 像 源 文件 】 对 话 

框 ， 在 其 中 选择 要 插入 的 图 像 ， 如 图 5-83 所 示 。 
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图 5-82 创建 空白 文档 图 5-83 ”选择 要 插入 的 图 像 


EEORS 单 击 【确定 】 按 钮 ， 即 可 将 选中 的 图 片 添加 到 空白 网 页 中 ， 如 图 5-84 所 示 。 
EESRZ 将 光标 定位 在 图 片 的 下 方 ， 在 其 中 输入 相关 文本 信息 ， 并 设置 文本 的 大 小 、 字 
体 的 颜色 、 样 式 等 ， 如 图 5-85 所 示 。 
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图 5-84 插入 图 片 图 5-85 输入 文本 信息 


EEJDy 将 光标 定位 在 文本 的 下 方 ， 选 择 【 插 入 】 一 【媒体 】 一 【插件 】 菜 单 命令 ， 打 
开 【 选 择 文件 】 对 话 框 ， 在 其 中 选择 需要 的 音乐 文件 ， 如 图 5-86 所 示 。 
ECSRD 单 击 【确定 】 按 钮 ， 即 可 将 音乐 文件 添加 到 网 页 之 中 ， 如 图 5-87 所 示 。 
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多 妥 民 一 要 无 做 ， 胡 站 疗 恒 扑 无 本 类 者 ;公吨 时 一 司 无 妨 ， 吉 此 而 区 迎 
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起 栓 慷 所 ， 属 产 再 抄 行 理 . 
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图 5-86 选择 音乐 文件 图 5-87 插入 音乐 文件 
EC 保存 文档 ， 单 击 【 预 览 】 按 钮 ， 在 弹出 的 下 拉 列 表 中 选择 预览 方式 ， 如 图 5-88 





所 示 。 
EC 启动 IE 浏览 器 ， 即 可 在 浏览 器 中 查看 创建 的 多 媒体 网 页 ， 如 图 5-89 所 示 。 
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图 5-88 选择 预览 方式 图 5-89 预览 多 媒体 网 页 


5.6 ”综合 案例 2 一 一 在 【代码 】 视 图 中 插入 背景 音乐 


在 制作 网 页 时 ， 除 了 要 尽量 提高 页 面 的 视觉 效果 、 互 动 功能 外 ， 还 需要 尽 可 能 地 提高 网 
页 的 听觉 效果 ， 如 为 网 页 插入 背景 音乐 。 下 面 介绍 在 【代码 】 视 图 中 插入 背景 音乐 的 方法 与 
步骤 。 
ED 启动 Dreamweaver CC， 打 开 资 源 文件 中 的 “ch0s\ 插 入 背景 音乐 html” 文 件 ， 如 
图 5-90 所 示 。 
EC 单 击 工具 栏 中 的 【代码 】 按 钮 ， 转 换 到 【代码 】 视 图 中 ， 在 <body> 后 输入 “<” 
符号 ， 用 于 显示 标签 列表 ， 这 里 双击 bgsound 选项 ， 如 图 5-91 所 示 。 
EE 了 9) 按 下 空格 键 ， 在 弹出 的 列表 中 双击 src 选项 ， 设 置 背景 音乐 文件 的 路 径 ， 如 图 5-92 
所 示 。 
EC 在 弹出 的 列表 中 ， 选 择 【浏览 】 选 项 ， 如 图 5-93 所 示 。 
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meta charset="utf-2 
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图 5-90 打开 素材 文件 图 5-91 【代码 】 视 图 窗口 





动 cNwserNqangwvpocumentsy 源 NE 入 每 果 罕 未 html- 


<mera charset=rutf-Br> <mera charset="utf-a"> 
<titte 无 标题 文 榴 </titte> <title> 无 标题 文 要 </title> 
</head> 


对 I 叶 英 局 


<body><bgsound sre= 中 
<img src="5.jpg" wi 
</body: 

</htm> 
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图 5-92 设置 背景 音乐 文件 的 路 径 图 5-93 选择 【浏览 】 选 项 


ECDIS 打开 【选择 文件 】 对 话 框 ， 在 其 中 选择 要 添加 的 音乐 文件 ， 如 图 5-94 所 示 。 
EEIRD 单 击 【确定 】 按 钮 ， 返 回 到 【代码 】 视 图 中 ， 如 图 5-95 所 示 。 
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图 5-94 【选择 文件 】 对 话 框 5-95 【代码 】 视 图 窗口 


EU 按 下 空格 键 ， 在 弹出 的 列表 中 双击 loop 选项 ， 如 图 5-96 所 示 。 

区 于 EY 在 弹出 的 列表 中 ， 双 击 -1 选项 ， 如 图 5-97 所 示 。 

EEJRUD 在 属性 值 后 面 输入 “/>” 符 号 ， 在 视图 窗口 中 可 以 生成 代码 ， 如 图 5-98 所 示 。 

EEC 保存 文档 。 按 下 F12 键 ， 即 可 在 浏览 的 同时 收听 到 刚刚 添加 的 背景 音乐 ， 如 
图 5-99 所 示 。 
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画 csers\qiangu\Pocumenti\ 天 G3 插入 至 厅 宇 条 html -Ox 
<!doctype html 
:Ee 民 
<head> 
emeta chars a arset="utf-a"> 
区 tl iv re, + <title; 无 标题 文档 cjtitle> 
区 将 </head> 
六 网 | 
und src="song.mp3" | ee Ese src="song.mp3" loop=" 
从 pg Width ram ere 从 i ee 
外 各 | 全 
-fm 外 | 
也 2 
四 
由 中 
| 
5-96 ”双击 loop 选项 5-97 设置 loop 的 值 
二 cAueersqangu\Documenti\ 汪 人 RB\ 折 和 本 守 htmi* 可 5 - oO x 
司 ldoctype RD 司 CUsersqiangu\Dor 吕 -5 | 屿 雹 5 本 六 入 x| 
<htmL> 文中 顷 语 E) 至 看 V) 收 襄 夫 A) 工 贡 (大风 (H) 
得 <head> - 
区 <meta charset="utf-8"> A 
sd <title> 无 标题 文风 </title> 
节 </head> 
和 
eb hgyound srcrsong. nos” 1"/> 
全 i 5.jpe" width=n483n 加 hm alt=m /> 
bey pay 
/html: 
四 
也 
加 
日 
| v 
图 5-98 输入 符号 图 5-99 预览 网 页 


5.7 疑难 解 惑 


疑问 1: 为 什么 插入 的 HTML5 视频 不 能 播放 ? 


答 : 在 制作 网 页 时 ， 在 其 中 插入 了 HTML5 视频 ， 所 有 的 操作 和 语法 都 正确 ， 就 是 不 能 
播放 ， 出 现 这 种 情况 的 原因 ， 可 能 是 因为 使 用 的 浏览 器 不 支持 HIML5， 可 以 换 一 个 浏览 器 试 
一 试 ， 如 搜狗 浏览 器 、360 安全 浏览 器 等 。 


疑问 2: 为 什么 我 在 网 页 中 插入 的 Active 控件 不 能 正常 显示 ? 


答 : 使 用 Dreamweaver 在 网 页 中 插入 Active 后 ， 如 果 浏 览 器 不 能 正常 显示 Active 控件 ， 
则 可 能 是 因为 浏览 器 禁用 了 Active 控件 所 致 ， 此 时 可 以 通过 下 面 的 方法 启用 Active 控件 。 
EC 打开 下 浏览 器 窗口 ， 选 择 【 工 具 】 一 【Internet 选项 】 菜 单 命令 。 打 开 
【Intemet 选项 】 对 话 框 ， 选 择 【 安 全 】 选 项 卡 ， 单 击 【 自 定义 级 别 】 按 钮 ， 如 图 5-100 
所 示 。 
EGG 打 开 【 安 全 设置 -Intemet 区 域 】 对 话 框 ， 在 【设置 】 列 表 框 中 启用 有 关 的 Active 
选项 ， 然 后 单 击 【确定 】 按 钮 即 可 ， 如 图 5-101 所 示 。 


浏 洁 冯 司 站 流 慌 灿 这 困 洱 窒 一 一 首 灿 十 到 对 ”性 9 让 全 
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图 5-100 【Internet 选项 】 对 话 框 图 5-101 【安全 设置 -Internet 区 域 】 对 话 框 


第 6 章 
不 在 网 页 中 迷路 
一 设计 网 页 中 的 

超 链接 


链接 是 网 页 中 比较 重要 的 部 分 ， 是 各 个 网 页 之 间 相 互 跳 转 的 依据 。 网 页 中 常用 
的 链接 形式 包括 文本 链接 、 图 像 链接 、 锚 记 链 接 、 电 子 邮 件 链接 、 空 链接 及 脚本 链 
接 等 。 本 章 就 来 介绍 如 何 创建 网 站 链接 。 


Dreamweaver CC 动态 网 站 开发 
案例 课堂 (第 2 版 ) 罗 一 


6.1 超级 链接 


链接 是 网 页 中 极为 重要 的 部 分 ， 单 击 文档 中 的 链接 ， 即 可 跳 转 至 相应 的 位 置 。 网 站 中 正 
是 有 了 链接 ， 才 实现 了 在 各 文档 之 间 的 相互 跳 转 进而 方便 地 查阅 所 需 的 知识 ， 享 受 网 络 带 来 
的 无 穷 乐趣 。 


6.1.1 链接 的 概念 


链接 也 叫 超级 链接 ， 由 源 端 点 和 目标 端点 两 部 分 组 成 ， 通 常 将 开始 位 置 的 端点 称 为 源 端 
点 (或 源 锚 )， 而 将 目标 位 置 的 端点 称 为 目标 端点 (或 目标 锚 )， 链 接 就 是 由 源 端 点 到 目标 端点 的 
一 种 跳 转 。 目 标 端点 可 以 是 任意 的 网 络 资源 ， 比 如 ， 它 可 以 是 一 个 页 面 、 一 幅 图 像 、 一 段 声 
音 、 一 段 程序 甚至 可 以 是 页 面 中 的 某 个 位 置 。 

根据 链接 源 端点 的 不 同 ， 超 级 链接 可 分 为 超 文本 和 超 链接 两 种 。 超 文本 就 是 利用 文本 创 
建 的 超级 链接 。 在 浏览 器 中 ， 超 文本 一 般 显 示 为 下 方 带 蓝 色 下 画 线 的 文字 。 超 链接 是 利用 除 
了 文本 之 外 的 其 他 对 象 所 构建 的 链接 ， 如 图 6-1 所 示 。 

利用 链接 可 以 实现 在 文档 间或 文档 中 的 跳 转 。 可 以 说 ， 浏 览 网 页 就 是 从 一 个 文档 跳 转 到 
另 一 个 文档 ， 从 一 个 位 置 跳 转 到 另 一 个 位 置 ， 从 一 个 网 站 跳 转 到 另 一 个 网 站 的 过 程 ， 而 这 些 
过 程 都 是 通过 链接 来 实现 的 ， 如 图 6-2 所 示 。 
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图 6-1 网 站 首页 图 6-2 通过 链接 进行 跳 转 





6.1.2 ”常规 的 链接 


常规 超级 链接 包括 内 部 链接 、 外 部 链接 和 脚本 链接 。 
1. 内 部 链接 


内 部 链接 是 指 目标 端点 位 于 站 点 内 部 的 超级 链接 ， 其 设置 非常 灵活 。 
创建 内 部 链接 的 方法 是 : 选中 准备 设置 超 链接 的 文本 或 图 像 后 ， 在 【属性 】 面 板 的 【 链 
接 】 文 本 框 中 输入 要 链接 对 象 的 相对 路 径 即 可 ， 如 图 6-3 所 示 。 


Dd 
全 i110 











局 
《> wma.| 格式 人) 无 ~ 类 | 无 v| 了 Z 王 注 经 经 标题 
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图 6-3 ”输入 链接 对 象 的 相对 路 径 
2. 外 部 链接 


外 部 链接 是 指 目标 端点 位 于 其 他 网 站 中 的 超级 链接 。 
创建 外 部 链接 的 方法 是 : 选中 准备 设置 超 链接 的 文本 或 图 像 后 ， 在 【属性 】 面 板 中 的 
【链接 】 文 本 框 中 输入 准备 链接 网 页 的 网 址 即 可 ， 如 图 6-4 所 示 。 








《ma | 格式) 无 ~| 类 | 无 ~| BI 生生 要 起 标题 (1) 











Bbcss D0) | 无 ~ 冬 撞 (L) | baidu ce “| 人 局。 目标 (0) ~ 





























图 6-4 ”输入 链接 网 页 的 网 址 
3. 脚本 链接 
脚本 链接 是 指 通 过 脚本 控制 的 超 链接 ， 一 般 情况 下 ， 脚 本 链接 可 以 用 来 执行 计算 、 表 单 
验证 和 其 他 处 理 。 


创建 脚本 链接 的 方法 是 : 选中 准备 设置 脚本 链接 的 文本 或 图 像 后 ， 在 【属性 】 面 板 中 的 
【链接 】 文 本 框 中 输入 相应 的 脚本 信息 ， 如 JavaScript:window.close()， 如 图 6-5 所 示 。 
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页 二 性- “| 列 和 i 辣 


























图 6-5 输入 链接 对 象 的 脚本 信息 


6.1.3 ”链接 的 类 型 


根据 链接 的 范围 ， 链 接 可 分 为 内 部 链接 和 外 部 链接 两 种 。 内 部 链接 是 指 同一 个 文档 之 间 
的 链接 : 外 部 链接 是 指 不 同 网 站 文档 之 间 的 链接 。 

根据 建立 链接 的 不 同 对 象 ， 链 接 又 可 分 为 文本 链接 和 图 像 链 接 两 种 。 浏 览 网 页 时 ， 将 鼠 
标 指针 移 到 文字 上 时 ， 鼠 标 指 针 将 变 成 手 形 ， 单 击 文字 就 会 打开 一 个 网 页 ， 这 样 的 链接 就 是 
文本 链接 ， 如 图 6-6 所 示 。 

在 网 页 中 浏览 内 容 时 ， 若 将 鼠标 指针 移 到 图 像 上 ， 鼠 标 指针 将 变 成 手 形 ， 单 击 图 片 就 会 
打开 一 个 网 页 ， 这 样 的 链接 就 是 图 片 链 接 ， 如 图 6-7 所 示 。 


浪 游 磺 号 丑 沼 习 半 洲 一 一 霹 陈 卫 沼 可 内 于 需 9 洲 全 
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6-6 文本 链接 示例 图 6-7 图 片 链接 示例 


6.2 链接 路 径 


一 般 来 说 ，Dreamweaver CC 人 允许 使 用 的 链接 路 径 有 3 种 ， 即 绝对 路 径 、 相 对 路 径 和 根 


路 径 。 


6.2.1 URL 概述 


URL(Uniform Resource Locator， 统 一 资源 定位 符 ) 是 互联 网 上 标准 资源 的 地 址 ， 主 要 用 于 
各 种 WWW 客户 程序 和 服务 器 程序 ， 表 示 一 个 网 页 地 址 。 


URL 由 3 部 
址 的 结构 。 









超 文本 传输 网 站 的 主页 没有 给 出 文件 名 , 以 


协议 资源 


分 组 成 ， 即 资源 类 型 、 存 放 资源 的 主机 域名 、 资 源 文件 名 。 图 6-8 所 示 为 网 


斜 本 “/” 结 尾 





图 6-8 网 址 的 结构 


6.2.2 ”绝对 路 径 


如 果 在 链接 中 使 用 完整 的 URL 地 址 ， 这 种 链接 路 径 就 被 称 为 绝对 路 径 。 绝 对 路 径 的 特点 
是 路 径 同 链接 的 源 端点 无 关 。 


例如 ， 要 创 到 





“白雪 能 铠 ”文件 夹 中 的 index.html 文档 的 链接 ， 则 可 使 用 绝对 路 径 “D:\ 


我 的 站 点 \index.html”。 


| 
A 采用 绝对 路 径 有 两 个 缺点 : 一 是 不 利于 测试 ; 二 是 不 利于 移动 站 点 。 


6.2.3 ”相对 路 径 


相对 路 径 是 指 以 当前 文档 所 在 的 位 置 为 起 点 到 被 链接 文档 经 由 的 路 径 。 文 档 相 对 路 径 可 
以 表述 源 端点 同 目标 端点 之 间 的 相互 位 置 ， 它 同 源 端 点 的 位 置 密切 相关 。 

使 用 文档 相对 路 径 有 以 下 3 种 情况 。 

(1) 如 果 链 接 中 源 端 点 和 目标 端点 在 同一 目录 下 ， 那 么 在 链接 路 径 中 只 需 提供 目标 端点 
的 文件 名 即 可 。 

(2) 如 果 链 接 中 源 端点 和 目标 端点 不 在 同一 目录 下 ， 则 需要 提供 目录 名 、 前 斜 杠 和 文件 
名 。 

(3) 如 果 链 接 指 向 的 文档 没有 位 于 当前 目录 的 子 级 目录 中 ， 则 可 利用 “../” 符 号 来 表示 
当前 位 置 的 上 级 目录 。 

采用 相对 路 径 的 特点 是 ， 只 要 站 点 的 结构 和 文档 的 位 置 不 变 ， 那 么 链接 就 不 会 出 错 ; 否 
则 链接 就 会 失效 。 在 把 当前 文档 与 处 在 同一 文件 夹 中 的 另 一 文档 链接 ， 或 把 同一 网 站 下 不 同 
文件 夹 中 的 文档 相互 链接 时 ， 就 可 以 使 用 相对 路 径 。 


6.2.4 根 路 径 


根 路 径 可 被 看 作 是 绝对 路 径 和 相对 路 径 之 间 的 一 种 折 中 ， 是 指 从 站 点 根 文件 夹 到 被 链接 
文档 经 由 的 路 径 。 在 这 种 路 径 表 达 式 中 ， 所 有 的 路 径 都 是 从 站 点 的 根 目录 开始 的 ， 同 源 端 点 
的 位 置 无 关 ， 通 常用 一 个 斜 线 /来 表示 根 目录 。 


Em 根 路 径 同 绝对 路 径 非 常 相似 ， 只 是 它 省 去 了 绝对 路 径 中 带 有 协议 地 址 的 
分 


到 | 


6.3 创建 超级 链接 的 方法 


在 Dreamweaver CC 中 ， 创 建 超级 链接 的 方法 多 种 多 样 ， 下 面 介绍 3 种 创建 超级 链接 的 方 
法 
6.3.1 案例 1 一 一 使 用 菜单 命令 创建 链接 
在 Dreamweaver CC 中 ， 用 户 可 以 使 用 菜单 命令 创建 超级 链接 ， 有 具体 的 操作 步骤 如 下 。 
EC 启动 Dreamweaver CC， 选 中 要 创建 超级 链接 的 文本 或 图 像 ， 选 择 【 修 改 】 一 


【创建 链接 】 菜 单 命令 ， 如 图 6-9 所 示 。 
EEIR2 弹出 【选择 文件 】 对 话 框 ， 在 其 中 选择 要 链接 的 目标 文件 ， 如 图 6-10 所 示 。 
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6-9 选择 【创建 链接 】 菜 单 命令 图 6-10 【选择 文件 】 对 话 框 


EESRS) 单 击 【确定 】 按 钮 ， 即 可 完成 使 用 菜单 创建 超 链接 的 操作 ， 在 【属性 】 面 板 中 
的 【链接 】 文 本 框 中 可 以 看 到 链接 的 目标 文件 ， 如 图 6-11 所 示 。 
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图 6-11 【属性 】 面 板 (1) 
6.3.2 案例 2 一 一 使 用 【属性 】 面 板 创建 链接 
【属性 】 面 板 中 的 【浏览 文件 】 图 标 和 【链接 】 文 本 框 可 用 于 创建 从 图 像 对 象 或 文本 到 其 
他 文档 或 文件 的 链接 。 


具体 的 方法 为 : 首先 选择 准备 创建 链接 的 对 象 ， 然 后 在 【属性 】 面 板 中 的 【链接 】 文 本 
框 中 输入 准备 链接 的 路 径 ， 如 图 6-12 所 示 ， 这 样 即 可 完成 使 用 【 属性】 面板 创建 链接 的 
操作 。 
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图 6-12 【属性 】 面板 (2) 
6.3.3 ”案例 3 一 一 使 用 【指向 文件 】 按 钮 创建 链接 


利用 【 属性】 面板 中 的 【指向 文件 】 按 钮 也 可 以 创建 超 链接 。 具 体 的 方法 为 : 首先 选择 
准备 创建 链接 的 对 象 ， 然 后 在 【 属性】 面板 中 ， 在 【指向 文件 】 按 钮 上 按 住 鼠 标 左 键 ， 并 将 


其 拖 动 到 站 点 窗口 中 的 目标 文件 上 ， 再 释放 鼠标 左 键 ， 这 样 即 可 完成 创建 链接 的 操作 ， 如 
图 6-13 所 示 。 

















图 6-13 使 用 【指向 文件 】 按 钮 创建 链接 


6.4 创建 不 同 种 类 的 网 页 超 链接 
Intemet 之 所 以 越 来 越 受 欢迎 ， 很 大 程度 上 是 因为 在 网 页 中 使 用 了 链接 。 


6.4.1 案例 4 一 一 添加 文本 链接 


通过 Dreamweaver CC， 可 以 使 用 多 种 方法 来 创建 内 部 链接 。 使 用 【属性 】 面 板 创建 网 站 
内 文本 链接 的 具体 操作 步骤 如 下 。 
ED 启动 Dreamweaver CC， 打 开 资 源 文件 中 的 “ch06\index.html” 文 件 ， 选 定 “ 关 
于 我 们 ”这 几 个 字 ， 将 其 作为 建立 链接 的 文本 ， 如 图 6-14 所 示 。 
EGR 单 击 【 属 性 】 面 板 中 的 【浏览 文件 】 按 钮 口 ， 弹 出 【选择 文件 】 对 话 框 ， 选 择 
网 页 文件 “关于 我 们 .html”， 单 击 【确定 】 按 钮 ， 如 图 6-15 所 示 。 
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Sn 在 【属性 】 面 板 中 直接 输入 链接 地 址 也 可 以 创建 链接 。 其 方法 是 ， 选 定 文本 
江 后 ， 选 择 【 窗 口 】 一 【属性 】 莱 单 命令 ,打开 【属性 】 面 板 ， 然 后 在 【链接 】 文 
本 框 中 直接 输入 链接 文件 名 “关于 我 们 .html” 即 可 。 


攻 于 BY 保存 文档 。 按 F12 键 在 浏览 器 中 可 以 预览 添加 的 文本 链接 效果 ， 如 图 6-16 
所 示 。 
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图 6-16 预览 网 页 
6.4.2 ”案例 5 一 一 添加 图 像 链 接 


使 用 【属性 】 面 板 创 建 图 像 链接 的 具体 操作 步骤 如 下 。 

EC 打开 资源 文件 中 的 “ch06\index.html” 文 件 ， 选 定 要 创建 链接 的 图 像 ， 然 后 单 击 
【属性 】 面 板 中 的 【浏览 文件 】 按 钮 回 ， 如 图 6-17 所 示 。 

ECEDPp 弹出 【选择 文件 】 对 话 框 ， 浏 览 并 选择 一 个 文件 ， 在 【组 织 】 下 拉 列 表 框 中 选 
择 【 文 档 】 选 项 ， 然 后 单 击 【 确 定 】 按 钮 ， 如 图 6-18 所 示 。 
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my A 
图 6-17 选 定 图 像 图 6-18 【选择 文件 】 对 话 框 


革 于 BY 在 【属性 】 面 板 的 【目标 】 下 拉 列 表 框 中 ， 选 择 链接 文档 打开 的 方式 ， 然 后 在 
【 蔡 换 】 文 本 框 中 输入 图 像 的 蔡 换 文本 “美丽 风光 ! ”， 如 图 6-19 所 示 。 
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图 6-19 【属性 】 面板 
QE 与 文本 链接 一 样 ， 也 可 以 通过 直接 输入 链接 地 址 的 方法 来 创建 图 像 链接 。 
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6.4.3 ”案例 6 一 一 创建 外 部 链接 


创建 外 部 链接 是 指 将 网 页 中 的 文字 或 图 像 ， 与 站 点 外 的 文档 ， 或 与 Internet 上 的 网 站 
相连 接 。 
Sm 创建 外 部 链接 (从 一 个 网 站 的 网 页 链接 到 另 一 个 网 站 的 网 页 ) 时 ， 必 须 使 用 绝 
SS 对 路 径 ， 即 被 链接 文档 的 完整 URL 要 包括 所 使 用 的 传输 协议 (对 于 网 页 通常 是 
http://). 


比如 ， 在 主页 上 添加 网 易 、 搜 狐 等 网 站 的 图 标 ， 将 它们 与 相应 的 网 站 链接 起 来 。 

EEJTDgp 打开 资源 文件 中 的 “ch06\index_1.html” 文 件 ， 选 定 百度 网 站 图 标 ， 在 【属性 】 
面板 的 【链接 】 文 本 框 中 输入 百度 的 网 址 http://www.baidu.com， 如 图 6-20 所 示 。 

EEIPy 保存 网 页 后 按 F12 键 ， 在 浏览 器 中 将 网 页 打开 。 单 击 创建 的 图 像 链接 ， 即 可 打 
开 百 度 网 站 首页 ， 如 图 6-21 所 示 。 
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6.4.4 ”案例 7 一 一 创建 锚 记 链接 


创建 命名 锚 记 (简称 锚 点 ) 就 是 在 文档 的 指定 位 置 设置 标记 ， 给 该 标记 命名 一 个 名 称 以 便 引 
用 。 通 过 创建 锚 点 ， 可 以 使 链接 指向 当前 文档 或 不 同文 档 中 的 指定 位 置 。 
打开 资源 文件 中 的 “ch06\index.html” 文 件 ， 切 换 到 代码 视图 中 ， 如 图 6-22 
所 示 。 
将 光标 放置 到 要 命名 锚 记 的 位 置 ， 或 选中 要 为 其 命名 锚 记 的 文本 ， 这 里 定位 在 
<body> 标 签 后 ， 输 入 <a name="top"></a> 代 码 ， 其 中 锚 记 名 称 为 top， 如 图 6-23 所 示 。 
返回 到 设计 视图 ， 此 时 即 可 在 文档 窗口 中 看 到 错 记 标记 最 ， 如 图 6-24 所 示 。 
Br 在 一 篇 文档 中 ， 锚 记名 称 是 唯一 的 ， 不 允许 在 同一 篇 文档 中 出 现 相同 的 锚 记 
名 称 。 锚 记名 称 中 不 能 含有 空格 ， 而 且 不 应 置 于 层 内 。 锚 记名 称 区 分 大 小 写 。 


在 文档 中 定义 了 锚 记 后 ， 只 做 好 了 链接 的 一 半 任 务 ， 要 链接 到 文档 中 锚 记 所 在 的 位 置 ， 
还 必须 创建 锚 记 链接 。 
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图 6-24 ”查看 新 添加 的 锚 记 


具体 的 操作 步骤 如 下 。 

在 文档 的 底部 输入 文本 “返回 顶部 ”并 将 其 选 定 ， 作 为 链接 的 文字 ， 如 图 6-25 
所 示 。 

ECERPp 在 【属性 】 面 板 的 【链接 】 文 本 框 中 输入 一 个 字符 “#” 和 锚 记 名 称 。 例 如 ， 要 
链接 到 当前 文档 中 名 为 Top 的 锚 记 ， 则 输入 # 和 op， 如 图 6-26 所 示 。 















属性 
《》 mm] 格式 @) | 县 藻 了 类 inte 
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图 6-25 ” 选 定 链接 的 文字 图 6-26 【属性 】 面 板 


Sn 车 要 链接 到 同一 文件 夹 内 其 他 文档 (如 main htmD) 中 名 为 top 的 锚 记 ， 则 应 输 

入 main.html#top。 同样， 也 可 以 使 用 【属性 】〗 面 板 中 的 【指向 文件 】〗 图 标 来 创建 
锚 记 链接 。 单 击 【 属 性 】 面 板 中 的 【指向 文件 】 图 标 够 ， 然 后 将 其 拖 至 要 链接 到 
的 锚 记 (可 以 是 同一 文档 中 的 锚 记 ， 也 可 以 是 其 他 打开 文档 中 的 锚 记 ) 上 即 可 。 


本 于 BY 保存 文档 ， 按 F12 键 在 浏览 器 中 将 网 页 打开 ， 然 后 单 击 网 页 底部 的 “返回 顶 
部 ”4 个 字 ， 如 图 6-27 所 示 。 
EEC 在 浏览 器 的 网 页 中 ， 正 文 的 第 1 行 就 会 出 现在 页 面 顶部 ， 如 图 6-28 所 示 。 
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图 6-27 预览 网 页 图 6-28 返回 页 面 项 部 


6.4.5 “案例 8 一 一 创建 图 像 热 点 链接 


在 网 页 中 ， 不 但 可 以 单 击 整 幅 图 像 跳 转 到 链接 文档 ， 也 可 以 单 击 图 像 中 的 不 同 区域 而 跳 
转 到 不 同 的 链接 文档 。 通 常 将 处 于 一 幅 图 像 上 的 多 个 链接 区 域 称 为 热点 。 热 点 工具 有 3 种 ， 
即 矩 形 热点 工具 、 椭 圆 形 热点 工具 和 多 边 形 热点 工具 。 
下 面 通过 实例 介绍 创建 图 像 热点 链接 的 方法 。 
EEJDp 打开 资源 文件 中 的 “ch06\index.html” 文 件 ， 选 中 其 中 的 图 像 ， 如 图 6-29 所 示 。 
EEJP9 单 击 【属性 】 面 板 中 相应 的 热点 工具 ， 这 里 选择 矩形 热点 工具 已 ， 然 后 在 图 像 
上 需要 创建 热点 的 位 置 拖 动 鼠标 创建 热点 ， 如 图 6-30 所 示 。 
































ee 
图 6-29 选 定 图 像 图 6-30 绘制 图 像 热点 


EECIey 在 【属性 】 面 板 的 【链接 】 文 本 框 中 输入 链接 的 文件 ， 即 可 创建 一 个 图 像 热点 
链接 ， 如 图 6-31 所 示 。 
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6-31 【属性 】 面 板 
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EEC 用 step 01 一 03 的 方法 创建 其 他 的 热点 链接 ， 单 击 【 属 性 】 面 板 上 的 指针 热点 工 
具 民 ， 将 鼠标 指针 恢复 为 标准 箭头 状态 ， 可 在 图 像 上 选取 热点 。 
Sn 被 选中 的 热点 边框 上 将 会 出 现 控 点 ， 拖 动 控 点 可 以 改变 热点 的 形状 。 选 中 热 
半点 后 ， 按 Delete 键 可 以 删除 热点 。 在 【属性 了 面板 中 可 以 设置 与 热点 相对 应 的 
URL 链接 地 址 。 


6.4.6 ”案例 9 一 一 创建 电子 邮件 链接 


电子 邮件 链接 是 一 种 特殊 的 链接 ， 单 击 这 种 链接 ， 会 启动 计算 机 中 相应 的 E-mail 程序 ， 
允许 书写 电子 邮件 ， 然 后 发 往 链接 中 指定 的 邮箱 地 址 。 
创建 电子 邮件 链接 的 具体 操作 步骤 如 下 。 
EEC 打开 需要 创建 电子 邮件 链接 的 文档 。 将 光标 置 于 文档 窗口 中 要 显示 电子 邮件 链 
接 的 地 方 (这 里 选择 页 面 底部 )， 选 中 即将 显示 为 电子 邮件 链接 的 文本 或 图 像 ， 然 后 选 
择 【 插 入 】 一 【电子 邮件 链接 】 菜 单 命令 ， 如 图 6-32 所 示 。 


Se 在 【插入 】 面 板 的 【常用 】 选 项 卡 中 单 击 【 电 子 邮件 链接 】 按 钮 也 可 以 打开 
【电子 邮件 链接 】 对 话 框 ， 如 图 6-33 所 示 。 
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图 6-32 ”选择 【电子 邮件 链接 】 菜 单 命令 图 6-33 【常用 】 选 项 卡 


EEC 在 弹出 的 【电子 邮件 链接 】 对 话 框 的 【文本 】 文 本 框 中 ， 输 入 或 编辑 作为 电子 
邮件 链接 显示 在 文档 中 的 文本 ， 在 【电子 邮件 】 文 本 框 中 输入 邮件 送 达 的 E-mail 地 
址 ， 然 后 单 击 【确定 】 按 钮 ， 如 图 6-34 所 示 。 


en 同样 ， 也 可 以 利用 【属性 】〗 面 板 创建 电子 邮件 链接 。 其 方法 是 ， 选 中 即将 显 
鲸 示 为 电子 邮件 链接 的 文本 或 图 像 ， 在 【属性 】〗 面 板 的 【链接 】〗 文 本 框 中 输入 
mailto:liule2012@163.com， 如 图 6-35 所 示 。 






































Er x 
文本 [联系 入 条 
由 于 岂 人， PalIto LIne50120163. co 3 
者 
| 
6-34 【电子 邮件 链接 】 对 话 框 6-35 【属性 】 面 板 
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ra 电子 邮件 地 址 的 格式 为 : 用 户 名 @ 主 机 名 (服务 器 提供 商 )。 在 【属性 】 面 板 
”的 【链接 】 文 本 框 中 输入 电子 邮件 地 址 时 ，mailto: 与 电子 邮件 地 址 之 间 不 能 出 现 
空格 (比如 正确 的 格式 为 mailto:liule2012@163.com)。 
ES 保存 文档 ， 按 F12 键 在 IE 浏览 器 中 预览 ， 可 以 看 到 电子 邮件 链接 的 效果 ， 如 
图 6-36 所 示 。 
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6-36 ”预览 效果 


6.4.7 案例 10 一 一 创建 下 载 文 件 的 链接 


下 载 文件 的 链接 在 软件 下 载 网 站 或 源 代 码 下 载 网 站 中 应 用 较 多 。 其 创建 的 方法 与 一 般 链 
接 的 创建 方法 相同 ， 只 是 所 链接 的 内 容 不 是 文字 或 网 页 ， 而 是 一 个 软件 。 
创建 下 载 文件 链接 的 具体 操作 步骤 如 下 。 
EC 打开 需要 创建 下 载 文件 链接 的 文档 文件 ， 选 中 要 设置 为 下 载 文件 的 链接 的 文 
本 ， 然 后 单 击 【 属 性 】 面 板 中 【链接 】 文 本 框 右边 的 【浏览 文件 】 按 钮 癌 ， 如 图 6-37 
所 示 。 
EECDRP9 打开 【选择 文件 】 对 话 框 ， 选 择 要 链接 的 下 载 文件 ， 如 “酒店 常识 .txt” 文 件 ， 
然后 单 击 【 确 定 】 按 钮 ， 即 可 创建 下 载 文件 的 链接 ， 如 图 6-38 所 示 。 
RY 1 be ess sole es inaeta ess priat em jquery edmyjs mq DT 


| | 接 [及 | 天 国 地 .区 起 FEF4 人 DO 
“酒店 介绍 “* 寻找 酒店 “加 入 会 员  “ 
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6-37 ”选择 文本 6-38 【选择 文件 】 对 话 框 
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6.4.8 案例 11 一 一 创建 空 链 接 


空 链接 是 指 没 有 目标 端点 的 链接 。 利 用 空 链接 可 以 激活 文档 中 链接 对 应 的 对 象 和 文本 。 
一 旦 对 象 或 文本 被 激活 ， 就 可 以 为 之 添加 一 个 行为 ， 以 实现 当 光 标 移动 到 链接 上 时 ， 进 行 切 
换 图 像 或 显示 分 层 等 动作 。 创 建 空 链接 的 具体 操作 步骤 如 下 。 

EEC 在 文档 窗口 中 ， 选 中 要 设置 为 空 链接 的 文本 或 图 像 ， 如 图 





6-39 所 示 。 












ET 








图 6-39 选择 图 像 
ET 打开 【属性 】 面 板 ， 然 后 在 【链接 】 文 本 框 中 输入 一 个 “#”， 即 可 创建 空 链 
接 ， 如 图 6-40 所 示 。 
aT 
地 图 00) 目标 (R)「 v 
RIOOY 原始 





SD 


图 6-40 【属性 】 面 板 


6.4.9 案例 12 一 一 创建 脚本 链接 


脚本 链接 是 另 一 种 特殊 类 型 的 链接 ， 通 过 单 击 带 有 脚本 链接 的 文本 或 对 象 ， 可 以 运行 相 
应 的 脚本 及 函数 (JavaScript 和 VBScript 等 )， 从 而 为 浏览 者 提供 许多 附加 的 信息 。 脚 本 链接 还 
可 以 被 用 来 确认 表单 。 创 建 脚 本 链接 的 具体 操作 步骤 如 下 。 
BEI 打开 需要 创建 脚本 链接 的 文档 ， 选 择 要 创建 脚本 链接 的 文本 、 图 像 或 其 他 对 
象 ， 这 里 选中 文本 “酒店 加 盟 ”， 如 图 6-41 所 示 。 
EDpp 在 【属性 】 面 板 的 【链接 】 文 本 框 中 输入 JavaScript: ， 接 着 输入 相应 的 
JavaScript 代码 或 函数 ， 如 输入 window.close0， 表 示 关 闭 当前 窗口 ， 如 图 6-42 
所 示 。 
EEJe 保存 网 页 ， 按 F12 键 在 正 浏览 器 中 将 网 页 打开 ， 如 图 6-43 所 示 。 单 击 创建 的 脚 


本 链接 文本 ， 会 弹出 一 个 对 话 框 ， 单 击 【 是 】 按 钮 ， 将 关闭 当前 窗口 ， 如 图 6-44 
所 示 。 
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图 6-41 选择 文本 图 6-42 输入 脚本 代码 
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关于 我 们 | | 酒 沾 登入 | 会 员 登 录 | 池上 加 盟国 
[se 和 | 


六 洲 本 否 隔 喇 习 玫 站 一 一 可 屿 隔 司 习 午 习 册 9 小 全 





Windows Internet Explorer 


全 器 各 而。 二 让 加 入 了 。 到] 











Hm 2t 2078 021 Di6t425 | HABA 你 覃 看 的 网 页 正在 试图 关闭 选项 卡 。 
是 否 关闭 此 选项 卡 ? 
Ew Ew 
图 6-43 ”预览 网 页 图 6-44 ”提示 信息 对 话 框 


Sm JPG 格式 的 图 片 不 支持 脚本 链接 ， 如 果 要 为 图 像 添加 脚本 链接 ， 则 应 先 将 图 
外 像 转换 为 GIF 格式 。 


6.5 ”综合 案例 一 一 为 企业 网 站 添加 友情 链接 


使 用 链接 功能 可 以 为 企业 网 站 添加 友情 链接 ， 具 体 的 操作 步骤 如 下 。 

ES 打开 资源 文件 中 的 “ch06\indexhtml” 文 件 ， 在 页 面 底部 输入 需要 添加 的 友情 链 
接 名 称 ， 如 图 6-45 所 示 。 

ECEIDp 这 里 选中 “百度 ”文件 ， 在 下 方 【属性 】 面 板 的 【链接 】 文 本 框 中 输入 
www.baidu.com， 如 图 6-46 所 示 。 
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6-45 ”输入 友情 链接 文本 6-46 ”添加 链接 地 址 
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EC) 重复 step 02 的 操作 ， 选 中 其 他 文字 ， 并 为 这 些 文字 添加 链接 ， 如 图 6-47 所 示 。 
ES 保存 文档 ， 按 F12 键 在 IE 浏览 器 中 预览 效果 。 单 击 其 中 的 链接 ， 即 可 打开 相应 
的 网 页 ， 如 图 6-48 所 示 。 





ZH WOE EV sms IAT RH 
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尾 性 
[<yrmau] 格式 8) 无 ~| 类 |liu: 
怒 css IC) 无 ~v| 锣 扩 (L) | soaha com 
图 6-47 添加 其 他 文本 的 链接 地 址 图 6-48 预览 网 页 
6.6 疑难 解 惑 


疑问 1: 如 何在 Dreamweaver 中 去 除 网 页 中 链接 文字 下 面 的 下 画 线 ? 


答 : 在 完成 网 页 中 的 链接 制作 之 后 ， 系 统 往往 会 自动 在 链接 文字 的 下 面 添加 一 条 下 画 
线 ， 用 来 表示 该 内 容 包 含 超级 链接 。 当 一 个 网 页 中 的 链接 较 多 时 ， 就 会 显得 杂乱 ， 因 此 有 时 
就 需要 去 除 超级 链接 。 其 具体 操作 方法 是 ， 在 设置 页 面 属性 中 【链接 】 选 项 卡 下 的 【水 平 线 
样式 】 下 拉 列 表 框 中 ， 选 择 【 始 终 无 下 画 线 】 选 项 ， 即 可 去 除 网 页 中 链接 文字 下 面 的 下 
画 线 。 

疑问 2: 在 为 图 像 设 置 热点 链接 时 ， 为 什么 之 前 为 图 像 设 置 的 普通 链接 无 法 使 用 呢 ? 


答 : 一 幅 图 像 只 能 选择 创建 普通 链接 或 热点 链接 。 如 果 同 一 幅 图 像 在 创建 了 普通 链接 后 
再 创建 热点 链接 ， 则 普通 链接 会 无 效 ， 只 有 热点 链接 是 有 效 的 。 


第 7 章 
让 网 页 互动 起 来 
一 使 用 网 页 
表单 和 行为 


很 多 网 站 都 有 申请 注册 会 员 或 邮箱 的 模块 ， 这 些 模块 都 是 通过 添加 网 页 表单 来 
完成 的 。 另 外 ， 设 计 人 员 在 设计 网 页 时 ， 需 要 使 用 编程 语言 实现 一 些 动作 ， 如 打开 
浏览 器 窗口 、 验 证 表单 等 ， 这 些 就 是 网 页 行为 。 本 章 将 要 介绍 的 内 容 是 如 何 使 用 网 
页 表单 和 行为 。 
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7.1 认识 表单 


表单 是 网 页 中 的 重要 组 成 部 分 ， 在 网 页 中 使 用 表单 之 前 ， 首 先 应 该 了 解 什么 是 表单 、 表 
单 对 象 有 哪些 、 插 入 表单 以 及 设置 表单 属性 等 内 容 。 


7.1.1 表单 概述 


表单 在 网 页 中 的 主要 功能 是 数据 采集 ， 实 现 浏览 者 与 服务 器 之 间 的 信息 传递 。 它 通常 由 
文本 框 、 下 拉 列 表 框 、 复 选 框 以 及 按钮 等 表单 对 象 组 成 ， 图 7-1 所 示 为 一 个 网 页 的 用 户 注 
册页 面 。 


wR 


全 村 本 个 ausroves 
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WE 
wn BAS 
SNED 杜 取 验证 码 
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7-1 网 页 用 户 注册 页 面 


另外 ， 一 个 表单 有 3 个 基本 组 成 部 分 ， 包 括 表单 标签 、 表 单 域 和 表单 按钮 。 

(1) 表单 标签 。 表 单 标签 为 <form></form>， 在 这 对 标签 中 包含 了 处 理 表单 数据 所 用 CGI 
程序 的 URL 以 及 数据 提交 到 服务 器 的 方法 。 

(2) 表单 域 。 表 单 域 包括 文 本 框 、 密 码 框 、 隐 藏 框 、 多 行文 本 框 、 复 选 框 、 单 选 按钮 、 
下 拉 列 表 框 和 文本 上 传 框 等 对 象 。 

(3) 表单 按钮 。 表 单 按钮 包括 提交 按钮 、 复 位 按钮 和 一 般 按 钮 ， 用 于 将 数据 传送 到 服务 
器 上 或 者 取消 输入 等 。 


7.1.2 ”认识 表单 对 象 


表单 是 放置 表单 对 象 的 容器 ， 要 使 表单 具有 真正 的 意义 ， 就 离 不 开 表 单 对 象 。 因 此 ， 表 
单 与 表单 对 象 是 一 个 整体 ， 下 面 认识 一 下 常见 的 表单 对 象 。 


1. 文本 字段 


文本 字段 可 以 输入 任意 类 型 的 文本 信息 ， 是 表单 应 用 较 多 的 表单 对 象 之 一 。 图 7-2 所 示 
为 一 个 注册 页 面 ， 其 中 用 户 名 、 手 机 号 和 验证 码 右 侧 的 文本 框 就 是 文本 字段 表单 对 象 在 网 页 
中 的 体现 。 


2. 密码 框 


密码 框 是 文本 字段 的 特殊 形式 ， 该 文本 框 中 的 文本 信息 不 会 以 明文 的 方式 显示 出 来 。 
图 7-3 所 示 为 一 个 网 页 的 用 户 登 录 页 面 ， 其 中 密码 右 侧 的 文本 框 就 是 密码 框 表单 对 象 在 网 页 
中 的 体现 。 
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记忆 窗 吗 免费 注册 
mA 
图 7-2 文本 字段 示例 图 7-3 密码 框 示例 


3. 文本 区 域 

文本 区 域 和 文本 字段 一 样 ， 可 以 输入 任意 类 型 的 文本 信息 ， 只 不 过 文本 区 域 可 以 设置 行 
数 与 列表 ， 而 文本 字段 不 可 以 。 图 7-4 所 示 为 一 个 网 页 中 在 线 留言 页 面 ， 其 中 留言 右 侧 的 区 
域 就 是 文本 区 域 表单 对 象 在 网 页 中 的 体现 ， 用 户 可 以 在 该 区 域 输入 多 行文 本 内 容 。 


4. 单 选 按钮 


单 选 按钮 在 同一 组 选项 中 只 能 选择 一 个 选项 ， 如 性 别 男 和 女 只 能 选择 一 个 。 图 7-5 所 示 
为 一 个 网 页 的 留言 本 页 面 ， 其 中 【性 别 】 右 侧 的 单 选 按钮 就 是 单 选 按钮 表单 对 象 在 网 页 中 的 
体现 。 
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图 7-4 文本 区 域 示 例 图 7-5 单 选 按 钮 示例 
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5. 复 选 框 

复 选 框 在 同一 组 选项 中 可 以 同时 选择 多 个 选项 。 图 7-6 所 示 【【 兴 趣 标签 】 右 侧 的 控件 就 
是 复 选 框 表单 对 象 在 网 页 中 的 体现 ， 用 户 可 以 选择 多 个 兴趣 对 象 。 

6. 选择 控件 

选择 控件 可 以 让 浏览 者 通过 列表 和 菜单 提供 的 选项 ， 来 选择 合适 的 数据 。 7-7 所 示 为 
一 个 网 页 的 商品 发 布 页 面 ， 通 过 单 击 【订单 类 型 】 右 侧 下 三 角 按钮 ， 在 弹出 的 下 拉 列 表 中 可 
以 选择 合适 的 类 型 ， 这 就 是 选择 控件 表单 对 象 在 网 页 中 的 体现 。 





A ly 下 
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9 ed sr 六 是 4 硬 
图 7-6 复 选 框 示例 图 7-7 选择 控件 示例 
7. 按钮 


按钮 可 用 于 提交 或 者 重 置 表单 元 素 ， 通 过 按钮 可 以 触发 某 种 行为 或 事件 。 图 7-8 所 示 为 
一 个 留言 本 页 面 ， 其 中 下 方 的 两 个 按钮 就 是 按钮 表单 对 象 在 网 页 中 的 体现 。 


8. 图 像 按钮 


图 像 按钮 和 网 页 中 默认 的 按钮 功能 一 样 ， 只 不 过 图 像 按 钮 显示 得 更 加 直观 ， 视 觉 冲 击 力 
较 强 。 图 7-9 所 示 为 一 个 网 页 中 的 登录 区 域 ， 其 中 【登录 】 按 钮 就 是 一 个 图 像 按 钮 。 
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图 7-8 按钮 示例 图 7-9 图 像 按钮 示例 
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9. 文件 域 


文件 域 的 作用 是 让 浏览 者 浏览 本 地 文件 ， 并 将 其 作为 表单 数据 进行 上 传 。 图 7-10 所 示 为 
一 个 留言 本 页 面 ， 其 中 【上 传 照 片 】 右 侧 的 内 容 就 是 文件 域 表 单 对 象 在 网 页 中 的 体现 。 


10. 电子 邮件 控件 


电子 邮件 控件 是 用 于 让 浏览 者 输入 正确 的 电子 邮箱 地 址 的 。 图 7-11 所 示 为 一 个 网 页 中 的 
用 户 注册 区 域 ， 其 中 【邮箱 】 右 侧 的 文本 框 就 是 电子 邮件 控件 表单 对 象 在 网 页 中 的 体现 ， 提 
示 用 户 输入 正确 的 邮箱 地 址 。 


过 冲 益 志 订 河 习 沽 窒 一 一 洒 耐 半 回 河 到 所 翰 4 溃 全 





图 7-10 文件 域 示例 图 7-11 电子 邮件 控件 示例 


7.1.3 ”插入 表单 


在 网 页 中 插入 表单 的 方法 很 简单 ， 可 以 通过 【插入 】 菜 单 中 的 命令 来 插入 ， 也 可 以 通过 
【插入 】 面 板 来 插入 ， 下 面 介绍 插入 表单 的 方法 与 步骤 。 
在 文档 中 插入 表单 的 具体 操作 步骤 如 下 。 
EGR 将 光标 放置 在 要 插入 表单 的 位 置 ， 选 择 【 插 入 】 一 【表单 】 【表单 】 菜 单 命 
令 ， 如 图 7-12 所 示 。 


5 四 要 插入 表单 域 ， 也 可 以 在 【插入 】 面 板 的 【表单 】〗 选 项 卡 中 单 击 【表单 了 
SS 按钮 
EDUDD 插入 表单 后 ， 页 面 上 会 出 现 一 条 红色 的 虚线 ， 如 图 7-13 所 示 。 这 就 是 在 设计 视 
图 中 查看 到 的 添加 的 表单 效果 。 


ee mo el0 sa an am 下 we -ox 
[5 




















人 aaDEEaaEaa 画 ta vssiv 
7-12 ”选择 【表单 】 菜 单 命令 图 7-13 插入 的 表单 域 
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| 本 表单 在 浏览 页 面 时 是 不 会 显示 出 来 的 ， 即 不 可 见 。 


7.1.4 设置 表单 属性 


表单 在 网 页 中 有 很 重要 的 作用 ， 因 此 对 其 属性 的 设置 也 就 显得 格外 重要 与 谨慎 了 。 在 网 
页 中 插入 表单 后 ， 选 中 插入 的 表单 ， 或 在 标签 选择 器 中 选择 [Easteml 标 签 ， 即 可 在 表单 的 
【属性 】 面 板 中 设置 属性 ， 如 图 7-14 所 示 。 










































































2 
SS I 
图 7-14 【属性 】 面板 
表单 的 常用 属性 有 以 下 几 种 。 


(1) ID: 为 表单 指定 ID 编号 ， 一 般 被 程序 或 脚本 所 用 。 

(2) Class: 为 表单 添加 样式 。 

(3) Action: 为 表单 指定 处 理 数据 的 路 径 。 

(4) Method: 为 表单 指定 将 数据 传输 到 服务 器 的 方法 ， 包 括 默认 、POST 和 GET 3 种 方 
法 ， 其 中 GET 方法 将 值 附 加 到 请 求 该 页 面 的 URL 中 ; POST 方法 将 在 HTTP 请 求 中 嵌入 表单 
数据 ， 默 认 方 法 使 用 浏览 器 的 默认 设置 将 表单 数据 发 送 给 服务 器 。 通 常 ， 默 认 方 法 为 GET 方 
法 。 

(5) Title: 为 表单 指定 标题 。 

(6) Enctype: 为 表单 指定 传输 数据 时 所 使 用 的 编码 类 型。 

(7) Target: 为 表单 指定 目标 窗口 的 打开 方式 。 

(8) Accept Charset: 为 表单 指定 字符 集 。 

(9) No Validate: 为 表单 指定 提交 时 是 否 进 行 数据 验证 。 

(10) Auto Complete: 为 表单 指定 是 否 让 浏览 器 自动 记录 之 前 输入 的 信息 。 


全 > 提交 的 表单 如 果 要 传输 用 户 名 和 密码 、 信 用 卡 或 其 他 敏感 性 信息 ，POST 方法 
汪 相对 于 GET 方法 更 加 安全 。 图 7-15 所 示 为 Method 下 拉 列 表 。 
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口 Wovaidate Enctype 匡 认 Fosr 认 ~ 
口 auto Complete 














7-15 ”Method 下 拉 列 表 


yy 


7.2 ”常用 表单 对 象 的 应 用 


表单 用 于 把 来 自用 户 的 信息 提交 给 服务 器 ， 是 网 站 管理 者 与 浏览 者 之 间 进 行 沟通 的 桥 
梁 。 利 用 表单 处 理 程序 ， 可 以 收集 、 分 析 用 户 的 反馈 意见 ， 使 网 站 管理 者 对 完善 网 站 建设 做 
出 科学 、 合 理 的 决策 。 因 此 ， 表 单 是 决定 网 站 成 功 与 否 的 重要 因素 。 


7.2.1 插入 文本 域 


文本 域 分 为 单行 文本 域 和 多 行文 本 域 ， 下 面 讲解 这 两 种 文本 域 的 插入 方法 ， 具 体操 作 方 
法 如 下 。 
ECEDRD 将 光标 定位 在 表单 内 ， 在 其 中 插入 一 个 两 行 两 列 的 表格 ， 然 后 输入 文本 内 容 并 
调整 表格 的 大 小 ， 如 图 7-16 所 示 。 
EEC 将 光标 定位 在 表格 第 一 行 右 侧 的 单元 格 中 ， 选 择 【 插 入 】 一 【表单 】 一 【 文 
本 】 菜 单 命令 ， 或 在 【插入 】 面 板 的 【表单 】 选 项 卡 中 单 击 【文本 】 按 钮 ， 如 图 7-17 
所 示 。 


过 审 淮 乙 订 河 习 泗 窟 一 一 洒 耐 半 回 河 到 所 盐 溃 全 
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图 7-16 插入 表格 7-17 ”选择 【文本 】 菜 单 命令 


ECERS9 单行 文本 域 插入 完成 后 ， 在 【属性 】 面 板 中 选中 Required( 必 要 ) 和 Auto Focus( 自 
动 焦点 ) 复 选 框 ， 将 Max Length( 最 多 字符 ) 设 置 为 13， 如 图 7-18 所 示 。 

EEC 将 光标 定位 在 表格 第 二 行 右 侧 的 单元 格 中 ， 选 择 【插入 】 一 【表单 】 一 【文本 
区 域 】 菜 单 命令 ， 或 在 【插入 】 面 板 的 【表单 】 选 项 卡 中 单 击 【文本 区 域 】 按 钮 ， 
如 图 7-19 所 示 。 

EEC 多 行文 本 域 插 入 完成 后 ， 在 【属性 】 面 板 中 设置 Rows( 行 数 ) 为 5、Cols( 列 ) 为 
50， 如 图 7-20 所 示 。 

EC 保存 网 页 后 按 F12 键 ， 进 入 页 面 预览 效果 ， 如 图 7-21 所 示 。 
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I 和 图 MIfe2oT70s 王 才 万 -地 || 居 无 三 六 区 x 国 名 
文 伯 (和 入 ( 量 ， 吾 看 WV】 收 基 A】 工具 TT 融和 


用 户 名 称 
| 个 人 信息 


图 7-20 插入 多 行文 本 域 图 7-21 页 面 预览 效果 


7.2.2 插入 密码 域 


密码 域 是 特殊 类 型 的 文本 域 。 当 用 户 在 密码 域 中 输入 文本 信息 时 ， 所 输入 的 文本 会 被 蔡 
换 为 星 号 或 项 目 符号 以 隐藏 该 文本 ， 从 而 保护 这 些 信息 不 被 别人 看 到 。 

插入 密码 域 的 具体 操作 步骤 如 下 。 

ES 打开 资源 文件 中 的 “ch0 和 密码 域 .html” 文 件 ， 将 光标 定位 在 “密码 ” 右 侧 的 单 
元 格 中 ， 如 图 7-22 所 示 。 

ES 选择 【插入 】 一 【表单 】 一 【密码 】 菜 单 命令 ， 或 在 【插入 】 面 板 的 【表单 】 
选项 卡 中 单 击 【 密 码 】 按 钮 ， 如 图 7-23 所 示 。 

EB 密码 域 插入 完成 后 ， 在 【属性 】 面 板 中 选中 Required( 必 要 ) 复 选 框 ， 将 Max 
Length( 最 多 字符 ) 设 置 为 25， 如 图 7-24 所 示 。 

EC 保存 网 页 后 按 F12 键 ， 进 入 页 面 预览 效果 ， 当 在 密码 域 中 输入 密码 时 ， 显 示 为 
项 目 符号 ， 如 图 7-25 所 示 。 
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图 7-24 插入 密码 域 图 7-25 页 面 预览 效果 
7.2.3 插入 复 选 杠 


如 果 要 从 一 组 选项 中 选择 多 个 选项 ， 则 可 使 用 复 选 框 。 有 以 下 两 种 方法 插入 复 选 框 。 
(1) 选择 【插入 】 一 【表单 】 一 【 复 选 框 】 菜 单 命令 ， 如 图 7-26 所 示 。 
(2) 单 击 【插入 】 面 板 【 表 单 】 选 项 卡 中 的 【 复 选 框 】 按 钮 ， 如 图 7-27 所 示 。 








"|" oi 
qe i :i 





7-26 ”选择 【 复 选 框 】 菜 单 命令 7-27 ” 单 击 【 复 选 框 】 按 钮 
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若 要 为 复 选 框 添加 标签 ， 可 在 该 复 选 框 的 旁边 单 击 ， 然 后 输入 标签 文字 即 可 ， 如 图 7-28 
所 示 。 另 外 ， 选 中 复 选 框 只， 在 【属性 】 面 板 中 可 以 设置 其 属性 ， 如 图 7-29 所 示 。 
请 选择 个 人 爱好 ， 
四 音乐 目 体 育 四 旅游 目 读书 


二 元 ” -| 男 
CEI -| a 








Doeases head Fom Te | 
Dt rons 











7-28 ”输入 复 选 框 标签 文字 


7.2.4 插入 单 选 按钮 


图 7-29 复 选 框 【属性 】 面 板 





如 果 从 一 组 选项 中 只 能 选择 一 个 选项 ， 则 需要 使 用 单 选 按 钮 功能 。 选 择 【 插 入 】 一 【 表 
单 】 一 【 单 选 按钮 】 菜 单 命令 ， 即 可 插入 单 选 按钮 。 


ze 通过 单 击 【 插 入 了】 面板 【表单 〗】 选 项 卡 中 的 【 单 选 按钮 】〗 按钮 回 ， 也 可 以 插 
慌 ”入 单 选 按钮 。 


若 要 为 单 选 按钮 添加 标签 ， 可 在 该 单 选 按钮 的 旁边 单 击 ， 然 后 输入 标签 文字 即 可 ， 如 
图 7-30 所 示 。 选 中 单 选 按钮 忠 ， 在 【属性 】 面 板 中 可 为 其 设置 属性 ， 如 图 7-31 所 示 。 


请 选择 个 人 爱好 ， 
日 音 乐 目 体育 自 旅游 写 读书 


[eB ee | 医 


[Doctied (Reoared | Fom 
三 wuereas 





3 医 





图 7-30 输入 单 选 按钮 标签 文字 图 7-31 单 选 按 钮 【属性 】 面 板 


7.2.5 插入 下 拉 菜 单 


表单 中 有 两 种 类 型 的 菜单 : 一 种 是 单 击 时 下 拉 的 菜单 ， 称 为 下 拉 菜单 ， 另 一 种 则 显示 为 


一 个 有 项 目的 可 滚动 列表 ， 用 户 可 从 该 列表 中 选择 项 目 ， 称 为 滚动 列表 。 图 7-32 分 别 是 下 拉 
菜单 域 和 滚动 列表 。 
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创建 下 拉 菜 单 的 具体 操作 步骤 如 下 。 机 
EEC 选择 【插入 】 一 【表单 】 一 【选择 】 菜 单 命令 ， 即 可 插入 下 拉 菜 单 ， 然 后 在 其 "' 
【属性 】 面 板 中 ， 单 击 【 列 表 值 】 按 钮 ， 如 图 7-33 所 示 。 阿 
EEJDpy 在 打开 的 对 话 框 中 进行 相应 的 设置 ， 如 图 7-34 所 示 。 星 
动 

加 列 值 x | 

机 已 固 国 | [于 可 用 

项 目 和 从 什 | 网 

音乐 1 页 

[es 3 表 

be E | 单 

Ex 和 

为 

图 7-33 【属性 】 面 板 7-34 【列表 值 】 对 话 框 


国 于 BY 单 击 【确定 】 按 钮 ， 在 【属性 】 面 板 的 Selected( 初 始 化 时 选 定 ) 列 表 框 中 选择 
【体育 】 选 项 ， 如 图 7-35 所 示 。 
EEC 保存 文档 ， 按 F12 键 在 正 浏览 器 中 预览 效果 ， 如 图 7-36 所 示 。 
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请 选择 个 人 爱好 
ES 
图 7-35 选择 初始 化 时 选 定 的 菜单 图 7-36 ”预览 效果 
7.2.6 插入 滚动 列表 
创建 滚动 列表 的 具体 操作 步骤 如 下 。 


EJ 选择 【插入 】 一 【表单 】 一 【选择 】 菜 单 命令 ， 插 入 选择 菜单 ， 然 后 在 其 【 属 
性 】 面 板 中 将 Size 设置 为 3， 如 图 7-37 所 示 。 

二 一 

大 一 | ”一 一 | 下 
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7-37 【属性 】 面板 


单 击 【 列 表 值 】 按 钮 ， 在 打开 的 对 话 框 中 进行 相应 的 设置 ， 如 图 7-38 所 示 。 
单 击 【确定 】 按 钮 保存 文档 。 按 F12 键 在 匡 浏览 器 中 预览 效果 ， 如 图 7.39 所 示 。 
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图 7-38 【列表 值 】 对 话 框 图 7-39 ”预览 效果 


按钮 对 于 表单 来 说 是 必 不 可 少 的 ， 无 论 用 户 对 表单 进行 了 什么 操作 ， 只 要 不 单 击 【 提 
交 】 按 钮 ， 服 务 器 与 客户 之 间 就 不 会 有 任何 交互 操作 。 


7.2.7 ”插入 按钮 


将 光标 放 在 表单 内 ， 选 择 【 插 入 】 一 【表单 】 一 【按钮 】 菜 单 命令 ， 即 可 插入 按钮 ， 如 
图 7-40 所 示 。 
选中 表单 按钮 渤 下 ， 即 可 在 打开 的 【属性 】 面 板 中 设置 按钮 Name( 名 称 )、Class( 类 )、 
Form Action( 动 作 ) 等 属性 ， 如 图 7-41 所 示 。 
































图 7-40 插入 按钮 图 7-41 设置 按钮 的 属性 


7.2.8 插入 图 像 按 钮 


在 HTML5 中 ， 可 以 使 用 图 像 作为 按钮 图 标 。 如 果 要 使 用 图 像 来 执行 任务 而 不 是 提交 数 
据 ， 则 只 需 将 某 种 行为 附加 到 表单 对 象 上 即 可 。 

ECDgp 打开 资源 文件 中 的 “ch07\ 图 像 按钮 .html” 文 件 ， 如 图 7-42 所 示 。 

本 了 TB 将 光标 置 于 第 4 行 单元 格 中 ， 选 择 【 插 入 】 一 【表单 】 一 【图 像 域 】 菜 单 命 
令 ， 或 单 击 【插入 】 面 板 【 表 单 】 选 项 卡 中 的 【图 像 域 】 按 钮 图 ， 弹 出 【选择 图 像 
源 文件 】 对 话 框 ， 如 图 7-43 所 示 。 

EECe) 在 【选择 图 像 源 文件 】 对 话 框 中 选中 图 像 ， 然 后 单 击 【确定 】 按 钮 ， 即 可 插入 
图 像 域 ， 如 图 7-44 所 示 。 

EEC 选中 该 图 像 域 ， 打 开 其 【属性 】 面 板 ， 设 置 图 像 域 的 属性 ， 这 里 采用 默认 设 
置 ， 如 图 7-45 所 示 。 
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7-42 ”打开 素材 文件 
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7-43 【选择 图 像 源 文件 】 对 话 框 
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图 7-44 ”插入 图 像 域 


7-45 图像 域 【属性 】 面 板 
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完成 设置 后 保存 文档 ， 按 F12 键 在 正 浏览 器 中 预览 效果 ， 如 图 7-46 所 示 。 


图 CAUsers\qiangu\Doc 只 -上 | 感 火车 查询 
文件 月 。 六 名 (5] 查看 (V) ”收藏 失 (A】 工具 (T) 帮 动 (H) 





图 7-46 预览 效果 
7.2.9 插入 文件 上 传 域 


通过 插入 文件 上 传 域 ， 可 以 实现 上 传 文档 和 图 像 的 功能 。 插 入 文件 上 传 域 的 具体 操作 步 
又 如 下 。 
EC 新 建 网 页 ， 输 入 文字 内 容 ， 将 光标 定位 在 需要 插入 文件 上 传 域 的 位 置 ， 如 图 7-47 
所 示 。 
EEC 选择 【插入 】 一 【表单 】 一 【文件 】 菜 单 命令 ， 或 单 击 【插入 】 面 板 【 表 单 】 
选项 卡 中 的 【图 像 域 】 按 钮 冒 ， 如 图 7-48 所 示 。 
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回回 天 417 x 232v 
图 7-47 新 建 网 页 图 7-48 选择 【文件 】 菜 单 命令 


ETE> 即 可 插入 文本 上 传 域 ， 如 图 7-49 所 示 。 
EDU 选择 文本 上 传 域 ， 在 【属性 】 面 板 中 可 以 设置 文本 上 传 域 的 属性 ， 如 图 7-50 
所 示 。 















日 二 rr 元 | mL | 8 
ossbld 一 aeaued Fom -Tar | 
(boav) inout#ELoFi el 四 同 芭 417 x 232v Croroan | 到 
7-49 插入 文本 上 传 域 图 7-50 设置 文本 上 传 域 的 属性 


7.3 认识 行为 


行为 是 由 事件 和 该 事件 触发 的 动作 组 成 的 ， 功 能 很 强大 ， 受 到 了 广大 网 页 设计 者 的 喜 
爱 。 行 为 是 一 系列 使 用 JavaScript 程序 预定 义 的 页 面 特效 工具 。 


7.3.1 行为 的 概念 


在 Dreamweaver CC 中 ， 行 为 是 插入 到 网 页 内 的 一 段 JavaScript 代码 ， 由 对 象 、 事 件 和 动 
作 构成 。 其 中 ， 对 象 是 产生 行为 的 主体 ， 如 图 像 、 文 本 等 ; 动作 是 最 终 产 生 的 工作 效果 ， 可 
以 是 播放 声音 、 交 换 图 像 、 弹 出 提示 信息 、 自 动 关闭 网 页 等 。 

事件 用 于 指定 选 定 行为 在 何 种 情况 下 发 生 的 工作 。 例 如 ， 想 应 用 单 击 图 像 时 跳 转 到 指定 
网 站 的 行为 ， 用 户 需要 把 事件 指定 为 单 击 (onClick) 事 件 。 


全 1 


7.3.2 打开 【行为 】 面 板 


在 Dreamweaver CC 中 ， 对 行为 的 添加 和 控制 主要 是 通过 【行为 】 面 板 来 实现 的 。 选 择 
【窗口 】 一 【行为 】 菜 单 命令 ， 即 可 打开 【行为 】 面 板 ， 如 图 7-51 所 示 。 

使 用 【行为 】 面 板 可 以 将 行为 附加 到 页 面 元 素 ， 并 且 可 以 修改 以 前 所 附加 行为 的 参数 。 
【行为 】 面 板 中 包含 以 下 一 些 选项 行为 。 

(1) 单 击 +, 按 钮 ， 可 弹出 动作 菜单 ， 如 图 7-52 所 示 ， 从 中 可 以 添加 行为 。 添 加 行为 时 ， 
只 需 从 动作 菜单 中 选择 一 个 行为 项 即 可 。 当 从 该 动作 菜单 中 选择 一 个 动作 时 ， 将 出 现 一 个 对 
话 框 ， 可 以 在 此 对 话 框 中 指定 该 动作 的 参数 。 如 果 动 作 菜单 上 的 所 有 动作 都 处 于 灰 显 状态 ， 
则 表示 选 定 的 元 素 无 法 生成 任何 事件 。 
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图 7-51 【行为 】 面 板 图 7-52 【行为 】 菜 单列 表 


(2) 单 击 = 按 钮 ， 可 从 行为 列表 中 删除 所 选 的 事件 和 动作 。 
(3) 单 击 全 按钮 或 按钮， 可 将 动作 项 向 前 或 向 后 移动 ， 从 而 改变 动作 执行 的 顺序 。 对 
于 不 能 在 列表 中 上 下 移动 的 动作 ， 箭 头 按钮 则 处 于 禁用 状态 。 


Se 按 ShifttF4 组 合 键 在 为 选 定 对 象 添加 了 行为 之 后 ， 就 可 以 利用 行为 的 事件 列 
NS 表 ， 选择 触发 该 行为 的 事件 ， 打 开 【 行 为 〗 面 板 。 


7.4 ”常用 内 置 行为 的 应 用 


Dreamweaver CC 内 置 有 许多 行为 ， 每 一 种 行为 都 可 以 实现 一 个 动态 效果 ， 或 用 户 与 网 页 
之 间 的 交互 。 


7.4.1 交换 图 像 


使 用 【交换 图 像 】 行 为 ， 通 过 更 改 图 像 标签 的 sre 属性 ， 可 将 一 幅 图 像 与 另 一 幅 图 像 进 行 
交换 。 使 用 此 动作 可 以 创建 鼠标 经 过 图 像 和 其 他 的 图 像 效 果 ( 包 括 一 次 交换 多 幅 图 像 )。 
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创建 【交换 图 像 】 行 为 的 具体 操作 步骤 如 下 。 

ET 打开 资源 文件 中 的 “ch07\ 应 用 行为 index html” 文 件 ， 如 图 7-53 所 示 。 

ET 选择 【窗口 ，、【 行 为 】 菜单 命令 ， 打 开 【 行 为 】 面 板 。 选 中 图 像 ， 单 击 +* 按 
钮 ， 在 弹出 的 菜单 中 选择 【交换 图 像 】 命 令 ， 如 图 7-54 所 示 。 


rt NIRANnder htnl CHTMD -ox 
tezt- os lareeprint. oas sorsezg. cas 中 me 调 } 为 也 


儿童 食品 网 二 











| 角 全 可 加 











图 7-53 打开 素材 文件 图 7-54 选择 【交换 图 像 】 命 令 
四 TB> 弹出 【交换 图 像 】 对 话 框 ， 如 图 7-55 所 示 。 


EEC 单 击 GEE 按钮 ， 弹 出 【选择 图 像 源 文件 】 对 话 框 ， 从 中 选择 一 幅 图 像 ， 如 
图 7-56 所 示 。 
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图 7-55 【交换 图 像 】 对 话 框 图 7-56 【选择 图 像 源 文件 】 对 话 框 
EEIDy 单 击 【确定 】 按 钮 ， 返 回 【 交 换 图 像 】 对 话 框 ， 如 图 7-57 所 示 。 
TB 单 击 【 确 定 】 按 钮 ， 添 加 【交换 图 像 】 行 为 ， 如 图 7-58 所 示 。 








Ee x 
sl 
到 表 
一 一 
证 导 兴 性 汶 Ens700l. pe 
区 
7-57 设置 原始 图 像 图 7-58 添加 【交换 图 像 】 行 为 
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保存 文档 ， 按 F12 键 在 正 浏览 器 中 预览 效果 ， 如 图 7-59 所 示 。 
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图 7-59 ”预览 效果 
7.4.2 ”弹出 信息 


创建 【弹出 信息 】 行 为 可 显示 一 个 带 有 指定 信息 的 JavaScript 警告 。 因 为 JavaScript 警告 
只 有 一 个 【确定 】 按 钮 ， 所 以 使 用 此 行为 可 以 提供 信息 ， 而 不 能 为 用 户 提供 选择 。 
创建 【弹出 信息 】 行 为 的 具体 操作 步骤 如 下 。 
EEJDp 打开 资源 文件 中 的 “ch07\ 应 用 行为 index.html” 文 件 ， 如 图 7-60 所 示 。 
EEJP9 单 击 文档 窗口 状态 栏 中 的 <body> 标 签 ， 选 择 【 窗 口 】 一 【行为 】 菜 单 命 令 ， 打 
开 【 行 为 】 面 板 。 单 击 【行为 】 面 板 中 的 二 -按钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【弹出 
信息 】 命 令 ， 如 图 7-61 所 示 。 
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或 化 评 末 用 东 由 、 纯正、 在 生 洲 状 机 这， 有 动 于 
过 检 多 、 相克 村 B33 生肖， 所 以 民 同 和 
米 为 主 料 ! 先 接 粮 六 尘 争 LL。 为 “长 生 尝 ”< 
1 TAR 详细 内 容 ， 
译 细 内 容 ， : 
[hody) Cdiviwr anver. container. cl earfix) Cr. oronoten sridy 《ay 可 国 W603 337~ 
图 7-60 打开 素材 文件 图 7-61 选择 【弹出 信息 】 命 令 


区 了 TRY 弹出 【弹出 信息 】 对 话 框 ， 在 【消息 】 文 本 框 中 输入 要 显示 的 信息 “欢迎 你 的 
光临 ”， 如 图 7-62 所 示 。 

EC 单 击 【 确 定 】 按 钮 ， 添 加 行为 ， 并 设置 相应 的 事件 ， 如 图 7-63 所 示 。 

本 于 BY 保存 文档 ， 按 F12 键 在 正 浏览 器 中 预览 效果 ， 如 图 7-64 所 示 。 
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来 自 网 页 的 消息 x 






































图 7-62 【弹出 信息 】 对 话 框 图 7-63 添加 行为 事件 ”图 7-64 信息 提示 框 
7.4.3 ”打开 浏览 器 窗口 


使 用 【打开 浏览 器 窗口 】 行 为 可 以 在 一 个 新 的 窗口 中 打开 URL， 可 以 指定 新 窗口 的 属性 
(包括 其 大 小 )、 特 性 (是 否 可 以 调整 大 小 、 是 否 具有 菜单 栏 等 ) 和 名 称 。 
使 用 【打开 浏览 器 窗口 】 行 为 的 具体 操作 步骤 如 下 。 
EEODDD 打开 资源 文件 中 的 “cho7\ 应 用 行为 index html” 文件 ， 如 图 7-65 所 示 。 
本 TY 选择 【窗口 】-【 行 为 】 菜 单 命令 ， 打 开 【 行 为 】 面 板 。 单 击 该 面板 中 的 国 ] 按 
钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【打开 浏览 器 窗口 】 命 令 ， 如 图 7-66 所 示 。 
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改变 尾 性 
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图 7-65 打开 素材 文件 图 7-66 选择 要 添加 的 行为 


ECDIS 弹出 【打开 浏览 器 窗口 】 对 话 框 ， 在 【要 显示 的 URL】 文 本 框 中 输入 在 新 窗口 
中 载 入 的 目标 URL 地 址 (可 以 是 网 页 ， 也 可 以 是 图 像 ); 或 单 击 【 要 显示 的 URL】 文 
本 框 右 侧 的 【浏览 】 按 钮 ， 弹 出 【选择 文件 】 对 话 框 ， 如 图 7-67 所 示 。 

EC 在 【选择 文件 】 对 话 框 中 选择 文件 ， 单 击 【 确 定 】 按 钮 ， 将 其 添加 到 文本 框 
中 ， 然 后 将 【窗口 宽度 】 和 【窗口 高 度 】 分 别 设置 为 380 和 350， 在 【窗口 名 称 】 
文本 框 中 输入 “弹出 窗口 ”， 如 图 7-68 所 示 。 

在 【打开 浏览 器 窗口 】 对 话 框 中 ， 各 部 分 的 含义 如 下 。 

® 【窗口 宽度 】 和 【窗口 高 度 】 文 本 框 : 用 于 指定 窗口 的 宽度 和 高 度 (以 像素 为 单位 )。 

@ 【导航 工具 栏 】 复 选 框 : 浏览 器 窗口 的 组 成 部 分 ， 包 括 【 后 退 】、【 前 进 】、【 主 
页 】 和 【重新 载 入 】 等 按钮 。 

@ 【地 址 工具 栏 】 复 选 框 :浏览 器 窗口 的 组 成 部 分 ， 包 括 【 地 址 】 文 本 框 等 。 
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7-67 【选择 文件 】 对 话 框 7-68 【打开 浏览 器 窗口 】 对 话 框 


【状态 栏 】 复 选 框 : 位 于 浏览 器 窗口 的 底部 ， 在 该 区 域 中 显示 消息 (如 剩余 的 载 入 时 
间 以 及 与 链接 关联 的 URL)。 

【菜单 条 】 复 选 框 : 浏览 器 窗口 上 显示 菜单 (如 文件 、 编 辑 、 查 看 、 转 到 和 帮助 等 菜 
单 ) 的 区 域 。 如 果 要 让 访问 者 能 够 从 新 窗口 导航 ， 用 户 应 该 选中 此 复 选 框 。 如 果 撤 选 
此 复 选 框 ， 在 新 窗口 中 用 户 只 能 关闭 或 最 小 化 窗口 。 

【需要 时 使 用 滚动 条 】 复 选 框 : 用 于 指定 如 果 内 容 超出 可 视 区 域 时 将 显示 滚动 条 。 
如 果 撤 选 此 复 选 框 ， 则 不 显示 滚动 条 ， 同 时 【调整 大 小 手柄 】 复 选 框 该 功能 也 会 被 
撤 选 ， 访 问 者 将 很 难看 到 超出 窗口 大 小 以 外 的 内 容 (虽然 他 们 可 以 拖 动 窗口 的 边缘 使 
窗口 滚动 )。 

【调整 大 小 手柄 】 复 选 框 : 用 于 指定 应 该 能 够 调整 窗口 的 大 小 。 方 法 是 拖 动 窗口 的 
右 下 角 或 单 击 右 上 角 的 最 大 化 按钮 。 如 果 撤 选 此 复 选 框 ， 调 整 大 小 控件 将 不 可 用 ， 
右 下 角 也 不 能 拖 动 。 

【窗口 名 称 】 文 本 框 : 新 窗口 的 名 称 。 如 果 用 户 要 通过 JavaScript 使 用 链接 指向 新 
窗口 或 控制 新 窗口 ， 则 应 该 对 新 窗口 命名 。 此 名 称 不 能 包含 空格 或 特殊 字符 。 


EECRD) 单 击 【 确 定 】 按 钮 ， 添 加 行为 ， 并 设置 相应 的 事件 ， 如 图 7-69 所 示 。 
EECDRD 保存 文档 ， 按 F12 键 在 正 浏览 器 中 预览 效果 ， 如 图 7-70 所 示 。 








图 7-69 设置 行为 事件 图 7-70 预览 效果 


过 审 益 志 订 河 习 沽 窒 一 一 潭 耐 半 回 河 到 所 翰 氏 名 全 
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7.4.4 检查 表单 行为 


在 包含 表单 的 页 面 中 填写 相关 信息 且 信 息 填写 出 错时 ， 系 统 会 自动 显示 出 错 信息 ， 这 是 
通过 检查 表单 来 实现 的 。 在 Dreamweaver CC 中 ， 可 以 使 用 【检查 表单 】 行 为 来 为 文本 域 设置 
有 效 性 规则 ， 检 查 文本 域 中 的 内 容 是 否 有 效 ， 以 确保 输入 数据 的 正确 性 。 

使 用 【检查 表单 】 行 为 的 具体 操作 步骤 如 下 。 

EEJDgp 打开 资源 文件 中 的 “ch07\ 检 查 表单 行为 html” 文 件 ， 如 图 7-71 所 示 。 

EEJ2y 按 Shift+F4 组 合 键 ， 打 开 【 行 为 】 面 板 ， 如 图 7-72 所 示 。 
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请 入 入 自 遇 方 绍 
日 我 介绍 ， 
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图 7-71 打开 素材 文件 图 7-72 【行为 】 面 板 
ED) 单 击 【 行 为 】 面 板 上 的 图 按钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【检查 表单 】 命 
令 ， 如 图 7-73 所 示 。 
EC 弹出 【检查 表单 】 对 话 框 ，【 域 】 列 表 框 中 显示 了 文档 中 插入 的 文本 域 ， 如 
图 7-74 所 示 。 
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图 7-73 选择 【检查 表单 】 命 令 7-74 【检查 表单 】 对 话 框 


在 【检查 表单 】 对 话 框 中 主要 参数 选项 的 具体 作用 如 下 。 

e ”【 域 】 列 表 框 : 用 于 选择 要 检查 数据 有 效 性 的 表单 对 象 。 

e@ 【 值 】 复 选 框 : 用 于 设置 该 文本 域 中 是 否 使 用 必 填 文本 域 。 

® 【可 接受 】 选 项 区 域 . 用 于 设置 文本 域 中 可 填 数据 的 类 型 ， 可 以 选择 4 种 类 型 。 选 


中 【任何 东西 】 单 选 按钮 表明 文本 域 中 可 以 输入 任意 类 型 的 数据 。 选 中 【数字 】 单 
选 按钮 表明 文本 域 中 只 能 输入 数字 数据 。 选 中 【电子 邮件 地 址 】 单 选 按钮 表明 文本 
域 中 只 能 输入 电子 邮件 地 址 。 选 中 【数字 从 】 单 选 按钮 可 以 设置 可 输入 数字 值 的 范 
围 ， 可 在 右边 的 文本 框 中 从 左 至 右 分 别 输入 最 小 数值 和 最 大 数值 。 

ED 选择 textfield3 文本 域 ， 选 中 【必需 的 】 复 选 框 ， 选 中 【任何 东西 】 单 选 按钮 ， 
设置 该 文本 域 是 必须 填写 项 ， 可 以 输入 任何 文本 内 容 ， 如 图 7-75 所 示 。 

ED9p 参照 相同 的 方法 ， 设 置 textfield2 和 textfield4 文本 域 为 必须 填写 项 。 其 中 
textfield2 文本 域 的 可 接受 类 型 为 数字 ，textfield4 文本 域 的 可 接受 类 型 为 任何 东西 ， 












过 冲 尖 志 订 河 习 沽 窟 一 一 洒 耐 半 回 河 到 所 则 4 名 全 






































如 图 7-76 所 示 。 
| 检查 表单 X 
| 厦 丁 .| a 
: i “| | 国有 区 2 N 
人 币 证 .| \ 
:回信 和 值 : 加 [2 而 的 NS 
可 相爱 ， 图 任何 东西 Ow 可 接受， 加 任 河东 西 OF NN 
口 电子 邮件 地 直 。 口 册 从 到 口 电 了 出 作 地 址 〇 数 从 [| 到 [| 
图 7-75 设置 【检查 表单 】 属 性 图 7-76 设置 其 他 检查 信息 


EC 单 击 【确定 】 按 钮 ， 即 可 添加 【检查 表单 】 行 为 ， 如 图 7-77 所 示 。 
EECRRUB) 保存 文 要 ， 按 F12 键 在 下 浏览 器 中 预览 效果 。 当 在 文档 的 文本 域 中 未 填写 或 填 
写 有 误 时 ， 会 打开 一 个 信息 提示 框 ， 提 示 出 错 信息 ， 如 图 7-78 所 示 。 


来 自 网 页 的 消息 x 


The following error(s) occurred: 
~ textfield is required. 

~ textfield2 is required. 

- password is required. 

~ textfield4 is required. 








图 7-77 添加 【检查 表单 】 行 为 图 7-78 “预览 网 页 提示 信息 


7.4.5 设置 状态 栏 文本 


使 用 【设置 状态 栏 文本 】 行为 可 在 浏览 器 窗口 底部 左 侧 的 状态 栏 中 显示 消息 。 比 如 ， 可 
以 使 用 此 行为 在 状态 栏 中 显示 链接 的 目标 而 不 是 显示 与 之 关联 的 URL。 

设置 状态 栏 文本 的 操作 步骤 如 下 。 

打开 资源 文件 中 的 “ch07\ 设 置 状态 栏 index html” 文 件 ， 如 图 7-79 所 示 。 

EDUD 按 Shift+F4 组 合 键 ， 打 开 【 行 为 】 面 板 ， 如 图 7-80 所 示 。 

单 击 【行为 】 面 板 上 的 因 按 钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【设置 文本 】-。【 设 


外 
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置 状态 栏 文本 】 命 令 ， 如 图 7-81 所 示 。 
EGG 弹出 【设置 状态 栏 文本 】 对 话 框 ， 在 【消息 】 文 本 框 中 输入 “欢迎 光临 ! ”， 
也 可 以 输入 相应 的 JavaSeript 代码 ， 如 图 7-82 所 示 。 





























图 7-80 【行为 】 面 板 




















设置 状态 栏 文本 x 
消息- 欧 醒 无量 1 EE 
注意: 并非 所 有 浏 点 吕 孝 支 折 Fe | 
直人 机 所 用 户 苗 计 希 娄 未 确定 是 否 允 许 此 功能 三 两 
图 7-81 选择 【设置 状态 栏 文本 】 命 令 图 7-82 【设置 状态 栏 文本 】 对 话 框 


葬 于 BY 单 击 【 确 定 】 按 钮 ， 添 加 行为 ， 如 图 7-83 所 示 。 
保存 文档 ， 按 F12 键 在 正 浏览 器 中 预览 效果 ， 如 图 7-84 所 示 。 




















图 7-83 添加 行为 图 7-84 ”预览 效果 
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7.5 ”综合 案例 一 一 使 用 表单 制作 留言 


一 个 好 的 网 站 ， 总 是 在 不 断 地 完善 和 改进 。 在 改进 的 过 程 中 ， 总 是 要 经 常 听取 别人 的 意 


， 为 此 可 以 通过 留言 本 来 获取 浏览 者 浏览 网 站 的 反馈 信息 。 


使 用 表单 制作 留言 本 的 具体 操作 步骤 如 下 。 

EDDp 打开 资源 文件 中 的 “ch07\ 制 作 留 言 本 .html” 文 件 ， 如 图 7-85 所 示 。 
ED 将 光标 移 到 下 一 行 ， 单 击 【插入 】 面 板 【 表 单 】 选 项 卡 中 的 【表单 】 按 钮 忆 ,， 
插入 一 个 表单 ， 如 图 7-86 所 示 。 








CE 












图 7-85 打开 素材 文件 图 7-86 插入 表单 


EEC 将 光标 放 在 红色 的 虚线 内 ， 选 择 【 插 入 】 一 【表格 】 菜 单 命令 ， 打 开 【 表 格 】 
对 话 框 。 将 【 行 数 】 设 置 为 9，【 列 】 设 置 为 2，【 表 格 宽度 】 设 置 为 470 像素 ， 
【边框 粗细 】 设 置 为 1 像素 ，【 单 元 格 边 距 】 设 置 为 2，【 单 元 格 间距 】 设 置 为 
3， 如 图 7-87 所 示 。 

EC 单 击 【 确 定 】 按 钮 ， 在 表单 中 插入 表格 ， 并 调整 表格 的 宽度 ， 如 图 7-88 所 示 。 


下 x 


MB |] al ] 
下 由 并 度 :[170 | 太守 






































7-87 设置 【表格 】 对 话 框 7-88 插入 表格 


EECIDp 在 第 1 列 单元 格 中 输入 相应 的 文字 ， 然 后 选 定 文字 ， 在 【 属性】 面板 中 ， 设 置 
文字 的 【大 小 】 为 12， 将 【水 平 】 设 置 为 【 右 对 齐 】， 【垂直 】 设 置 为 【居中 】， 
如 图 7-89 所 示 。 





过 冲 益 志 订 河 习 沽 窟 一 一 洒 耐 半 回 河 到 打 翰 4 泊 和 
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ECG 将 光标 放置 在 第 1 行 第 2 列 单元 格 中 ， 选 择 【 插 入 】 一 【表单 】 一 【文本 域 】 
菜单 命令 ， 插 入 文本 域 。 在 【属性 】 面 板 中 ， 设 置 文本 域 的 【字符 宽度 】 为 12， 
【最 多 字符 数 】 为 12， 如 图 7-90 所 示 。 


























图 7-89 在 表格 中 输入 文字 图 7-90 添加 文本 域 


EC 重复 以 上 步 又， 在 第 3 行 、 第 4 行 和 第 5 行 的 第 2 列 单元 格 中 插入 文本 域 ， 并 
设置 相应 的 属性 ， 如 图 7-91 所 示 。 

ECDRB 将 光标 放置 在 第 2 行 第 2 列 单元 格 中 ， 单 击 【插入 】 面 板 【 表 单 】 选 项 卡 中 的 
【 单 选 按钮 】 按 钮 回 ， 插 入 单 选 按钮 。 在 单 选 按钮 的 右 侧 输入 “ 男 ”， 按 照 同 样 的 
方法 再 插入 一 个 单 选 按钮 ， 输 入 “ 女 ”。 在 【属性 】 面 板 中 ， 将 【初始 状态 】 分 别 
设置 为 【已 勾 选 】 和 【未 选中 】， 如 图 7-92 所 示 。 

















图 7-91 添加 其 他 文本 域 图 7-92 添加 单 选 按钮 


ETE> 将 光标 放置 在 第 3 行 第 2 列 单元 格 中 ， 单 击 【 插 入 】 面 板 【表单 】 选 项 卡 中 的 
【 复 选 框 】 按 钮 回 ， 插 入 复 选 框 。 在 【属性 】 面 板 中 ， 将 【初始 状态 】 设 置 为 【未 
选中 】， 在 其 后 输入 文本 “音乐 ”， 如 图 7-93 所 示 。 

EETDY 按照 同样 的 方法 ， 插 入 其 他 复 选 框 ， 设 置 其 属性 并 输入 文字 ， 如 图 7-94 所 示 。 

本 DY 将 光标 置 于 第 8 行 第 2 列 单元 格 中 ， 选 择 【插入 】- 【表单 】-_，【 文 本 区 域 】 
菜单 命令 ， 插 入 多 行文 本 域 ， 并 将 【属性 】 面 板 中 的 选项 设置 为 默认 值 ， 如 图 7-95 
所 示 。 

本 E> 将 光标 放置 在 第 7 行 第 2 列 单元 格 中 ， 选 择 【 插 入 】-，【 表 单 】->【 文 件 域 】 
菜单 命令 ， 插 入 文件 域 。 在 【属性 】 面 板 中 为 其 设置 相应 的 属性 ， 如 图 7-96 所 示 。 
































过 尘 过 性 洒 昼 习习 站 一 一 诗 山 起 加 恒 习 斤 才 人 让 全 








图 7-95 插入 多 行文 本 域 图 7-96 插入 文件 域 


EEIE 选 定 第 9 行 的 两 个 单元 格 ， 选 择 【 修 改 】 一 【表格 】 一 【合并 单元 格 】 菜 单 命 
令 ， 合 并 单元 格 。 将 光标 放置 在 合并 后 的 单元 格 中 ， 在 【属性 】 面 板 中 ， 将 【水 
平 】 设 置 为 【居中 对 齐 】， 如 图 7-97 所 示 。 

ECGIE 选择 【插入 】 一 【表单 】 一 【按钮 】 菜 单 命 令 ， 插 入 辐 到 按钮 和 国 可 按钮。 在 
【属性 】 面 板 中 ， 分 别 为 其 设置 相应 的 属性 ， 如 图 7-98 所 示 。 

EEaD) 保存 文档 ， 按 F12 键 在 正 浏览 器 中 预览 效果 ， 如 图 7-99 所 示 。 
































7-97 ”合并 单元 格 
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图 7-99 ”预览 网 页 效果 


7.6 疑难 解 惑 


疑问 1: 如 何 保证 表单 在 IE 浏览 器 中 正常 显示 ? 


答 : 在 Dreamweaver 中 插入 表单 并 调整 到 合适 的 大 小 后 ， 在 正 浏览 器 中 预览 时 可 能 会 出 
现 表单 大 小 失真 的 情况 。 为 了 保证 表单 在 正 浏览 器 中 能 正常 显示 ， 建 议 使 用 CSS 样式 表 调 
整 表单 的 大 小 。 

疑问 2: 如 何 下 载 并 使 用 更 多 的 行为 ? 

答 : Dreamweaver 包含 了 百 余 个 事件 、 行 为 ， 如 果 认 为 这 些 行为 还 不 足以 满足 需求 ， 
Dreamweaver 同时 也 提供 有 扩展 行为 的 功能 ， 可 以 下 载 第 三 方 的 行为 。 下 载 之 后 解压 到 
Dreamweaver 的 安装 目录 Adobe Dreamweaver CC\configuration\Behaviors\Actions 下 。 重 新 启 


动 Dreamweaver， 在 【行为 】 面 板 中 单 击 罗 按钮 ， 在 弹出 的 【行为 】 菜 单 中 即 可 看 到 新 添加 
的 行为 选项 。 


第 8 章 
简单 的 网 页 布局 
一 使 用 表格 

布局 网 页 


表格 是 布局 页 面 时 极为 有 用 的 设计 工具 ， 通 过 使 用 表格 布局 网 页 可 实现 对 页 面 
元 素 的 准确 定位 ， 使 得 页 面 在 形式 上 丰富 多 彩 、 条 理 清晰 ， 在 组 织 上 井然 有 序 而 又 
不 失 单 调 。 合理 地 利用 表格 来 布局 页 面 有 助 于 协调 页 面 结构 的 均衡 。 本 章 就 来 介绍 
如 何 使 用 表格 布局 网 页 。 


Dreamweaver CC 动态 网 站 开发 
案例 课堂 (第 2 版 ) 风 一 


8.1 案例 1 一 一 插入 表格 


表格 由 行 、 列 和 单元 格 3 部 分 组 成 。 使 用 表格 可 以 排列 网 页 中 的 文本 、 图 像 等 各 种 网 页 
元 素 ， 可 以 在 表格 中 自由 地 进行 移动 、 复 制 和 粘贴 等 操作 ， 还 可 以 在 表格 中 嵌 套 表格 ， 使 页 
面 的 设计 更 灵活 、 方 便 。 

使 用 【插入 】 面 板 或 【插入 】 菜 单 都 可 以 创建 表格 ， 插 入 表格 的 具体 操作 步骤 如 下 。 

EEC 新 建 一 个 空白 网 页 文档 ， 将 光标 定位 在 需要 插入 表格 的 位 置 ， 如 图 8-1 所 示 。 








CNN EE 
图 8-1 空白 网 页 文档 


ED 单 击 【 插 入 】 面 板 【 常 用 】 选 项 卡 中 的 【表格 】 按 钮 ， 或 选择 【插入 】 一 【 表 
格 】 菜 单 命令 ， 如 图 8-2 所 示 。 




















Ex $x tt(0) ss(O wls) 
| Div(D) 
HTML5 Video(V) Ctrl+Alt+Shift+V 





图 8-2 【常用 】 面 板 与 【表格 】 菜单 命令 
EEDS 打开 【表格 】 对 话 框 ， 在 其 中 可 以 对 表格 的 行 数 、 列 数 以 及 表格 宽度 等 信息 进 
行 设置 ， 如 图 8-3 所 示 。 
【表格 】 对 话 框 中 各 个 选项 及 参数 的 含义 如 下 。 
@ 【 行 数 】: 在 该 文本 框 中 输入 新 建 表格 的 行 数 。 
【 列 】: 在 该 文本 框 中 输入 新 建 表格 的 列 数 。 
【表格 宽度 】: 该 文本 框 用 于 设置 表格 的 宽度 ， 单 位 可 以 是 像素 或 百分比 。 
【边框 粗细 】: 该 文本 框 用 于 设置 表格 边框 的 宽度 (以 像素 为 单位 )。 若 设置 为 0， 在 
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浏览 时 则 不 显示 表格 边框 。 

@ 【单元 格 边 距 】: 该 文本 框 用 于 设置 单元 格 边框 和 单元 格 内容 之 间 的 像素 数 。 

@ 【单元 格 间距 】: 该 文本 框 用 于 设置 相 邻 单 元 格 之 间 的 像素 数 。 

e 【标题 】: 该 选项 组 用 于 设置 表 头 样式 ， 有 4 种 样式 可 供 选择 ， 分 别 如 下 。 
【无 】: 不 将 表格 的 首 列 或 首 行 设置 为 标题 。 
【 左 】: 将 表格 的 第 一 列 作为 标题 列 ， 表 格 中 的 每 一 行 可 以 输入 一 个 标题 。 
【顶部 】: 将 表格 的 第 一 行 作为 标题 行 ， 表 格 中 的 每 一 列 可 以 输入 一 个 标题 。 
【两 者 】: 可 以 在 表格 中 同时 输入 列 标题 和 行 标题 。 

e 【标题 】: 在 该 文本 框 中 输入 表格 的 标题 ， 标 题 将 显示 在 表格 的 外 部 。 

e@ 【摘要 】: 在 这 里 可 输入 文字 对 表格 进行 说 明 或 注释 ， 内 容 不 会 在 浏览 器 中 显示 ， 
仅 在 源 代码 中 显示 ， 可 提高 源 代码 的 可 读 性 。 

EEC 单 击 【 确 定 】 按 钮 ， 即 可 在 文档 中 插入 表格 ， 如 图 8-4 所 示 。 


天 信 x 
Np 二 untived-1* -Ox 
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| 机 助 | 证 取消 | <bodv> EtabLe] 画 国 500 x spv 


图 8-3 【表格 】 对 话 框 图 8-4 在 文档 中 插入 表格 








8.2 选中 表格 
插入 表格 后 ， 可 以 对 表格 进行 选中 操作 ， 比 如 选中 整个 表格 或 表格 中 的 行 与 列 、 单 元 格 等 。 


8.2.1 案例 2 一 一 选中 完整 的 表格 


选中 完整 表格 的 方法 主要 有 以 下 4 种 。 

(1) 将 鼠标 指针 移动 到 表格 上 面 ， 当 鼠标 指针 呈 网 格 图 标 团 时 单 击 鼠 标 左 键 ， 如 图 8-5 
所 示 。 
(2) 单 击 表 格 四 周 的 任意 一 条 边框 线 ， 如 图 8-6 所 示 。 

(3) 将 光标 置 于 任意 一 个 单元 格 中 ， 选 择 【 修 改 】 一 【表格 】 一 【选择 表格 】 菜 单 命 
令 ， 如 图 8-7 所 示 。 

(4) 将 光标 置 于 任意 一 个 单元 格 中 ， 在 文档 窗口 状态 栏 的 标签 选择 器 中 单 击 <table> 标 

签 ， 如 图 8-8 所 示 。 
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图 8-5 选中 表格 的 方法 (1) 图 8-6 选中 表格 的 方法 (2) 
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图 8-7 选中 表格 的 方法 (3) 图 8-8 选中 表格 的 方法 (4) 


8.2.2 ”案例 3 一 一 选中 行 和 列 


选中 表格 中 的 行 和 列 的 方法 主要 有 以 下 两 种 。 

(1) 将 光标 定位 于 行 首 或 列 首 ， 当 鼠标 指针 变 成 中 或 4 的 箭头 形状 时 单 击 鼠标 左 键 ， 即 可 
选中 表格 的 行 或 列 ， 如 图 8-9 所 示 。 

(2) 按 住 鼠标 左 键 不 放 从 左 至 右 或 从 上 至 下 拖 动 ， 即 可 选中 表格 的 行 或 列 ， 如 图 8-10 所 示 。 
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8.2.3 ”案例 4 一 一 选中 单元 格 


要 想 选中 表格 中 的 某 个 单元 格 ， 可 以 进行 以 下 几 种 操作 。 

(1) 按 住 Ctrl 键 不 放 单 击 单元 格 ， 可 以 选中 一 个 或 多 个 单元 格 。 

(2) 按 住 鼠标 左 键 不 放 并 拖 动 ， 可 以 选中 多 个 单元 格 。 

(3) 将 光标 放置 在 要 选中 的 单元 格 中 ， 单 击 文档 窗口 状态 栏 上 的 <td> 标 签 ， 即 可 选中 该 
单元 格 ， 如 图 8-11 所 示 。 
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body) ctable) try RED 日 辐 到 ] 482 x 297~ 
图 8-11 选中 单元 格 


想 要 选中 表格 中 的 多 个 单元 格 ， 可 以 进行 下 列 操作 。 

(1) 选中 相 邻 的 单元 格 、 行 或 列 : 先 选中 一 个 单元 格 、 行 或 列 ， 按 住 Shift 键 的 同时 单 击 
另 一 个 单元 格 、 行 或 列 ， 和 矩形 区 域内 的 所 有 单元 格 、 行 或 列 就 都 会 被 选中 ， 如 图 8-12 所 示 。 

(2) 选中 不 相 邻 的 单元 格 、 行 或 列 : 按 住 Ctrl 键 的 同时 单 击 需要 选中 的 单元 格 、 行 或 列 
即 可 ， 如 图 8-13 所 示 。 


二 untited-1* 本 








pp GG 










































































图 8-12 ”选中 相 邻 的 单元 格 图 8-13 ”选中 不 相 邻 的 单元 格 


| 
RE 在 选中 单元 格 、 行 或 列 时 ， 两 次 单 击 会 取消 已 选中 对 象 的 选中 状态 。 
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8.3 表格 属性 


为 了 使 创建 的 表格 更 加 美观 ， 需 要 对 表格 的 属性 进行 设置 。 表 格 属性 主要 包括 完整 表格 
的 属性 和 表格 中 单元 格 的 属性 两 种 。 


8.3.1 案例 5 一 一 设置 单元 格 属性 


在 Dreamweaver CC 中 ， 可 以 单独 设置 单元 格 的 属性 。 设 置 单元 格 属性 的 具体 操作 步 又 
如 下 。 
EEC 按 住 Ctrl 键 的 同时 单 击 单元 格 的 边框 ， 选 中 单元 格 ， 如 图 8-14 所 示 。 
ETPy 选择 【窗口 】-~【 属 性 】 菜 单 命令 ， 打 开 显示 单 元 格 属性 的 面板 ， 从 中 对 单元 
格 、 行 和 列 等 的 属性 进行 设置 ， 比 如 将 选中 的 单元 格 的 背景 颜色 设置 为 蓝 色 
(#0000FF)， 如 图 8-15 所 示 。 









































































































































国 wnauedr -Ox vir | 
[| 
am 日 辐 机 82 x 297 remem 目 转 世 ] 482 x 297% 
图 8-14 ”选中 单元 格 8-15 ”为 单元 格 添加 背景 颜色 


在 选中 单元 格 后 也 可 以 按 Ctl+F3 组 合 键 ， 打 开 【 属 性 】 面 板 ， 如 图 8-16 所 示 。 
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图 8-16 【属性 】 面 板 


在 单元 格 的 【属性 】 面 板 中 ， 可 以 设置 以 下 选项 或 参数 。 
(1) 【合并 单元 格 】 按 钮 回 : 用 于 把 所 选 的 多 个 单元 格 合并 为 一 个 单元 格 。 
(2) 【 拆 分 单元 格 为 行 或 列 】 按 钮 6: 用 于 将 一 个 单元 格 分 成 两 个 或 更 多 个 单元 格 。 


Se 一 次 只 能 对 一 个 单元 格 进行 拆 分 ， 如 果 选 择 的 单元 格 多 于 一 个 ， 此 按钮 将 被 
禁用 。 


(3) 【水 平 】: 该 下 拉 列 表 框 用 于 设置 单元 格 中 对 象 的 水 平 对 齐 方式 。【 水 平 】 下 拉 列 
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表 框 中 包括 默认 、 左 对 齐 、 居 中 对 齐 和 右 对 齐 等 4 个 选项 。 

(4) 【垂直 】: 该 下 拉 列 表 框 用 于 设置 单元 格 中 对 象 的 垂直 对 齐 方式 ， 【垂直 】 下 拉 列 
表 框 中 包括 默认 、 顶 端 、 居 中 、 底 部 和 基线 等 5 个 选项 。 

(5) 【 宽 】 和 【高 】: 这 两 个 文本 框 用 于 设置 单元 格 的 宽度 和 高 度 ， 单 位 是 像素 或 百 
分 比 。 


Sm 采用 像素 为 单位 的 值 是 表格 、 行 或 列 当前 的 宽度 或 高 度 的 值 ; 以 百分比 为 单 
慌 位 的 值 是 表格 、 行 或 列 占 当 前 文档 窗口 宽度 或 高 度 的 百分比 。 


(6) 【不 换行 】: 该 复 选 框 用 于 设置 单元 格 文本 是 否 换行 。 如 果 选 中 【不 换行 】 复 选 
框 ， 表 示 单 元 格 的 宽度 随 文字 长 度 的 增加 而 变 宽 。 当 输入 的 表格 数据 超出 单元 格 宽度 时 ， 单 元 
格 会 调整 宽度 来 容纳 数据 。 

(7) 【标题 】: 该 复 选 框 用 于 将 当前 单元 格 设置 为 标题 行 。 

(8) 【背景 颜色 】: 该 选项 用 于 设置 单元 格 的 背景 颜色 。 使 用 颜色 选择 器 副 可 选择 要 设 
置 的 单元 格 的 背景 颜色 。 


8.3.2 ”案例 6 一 一 设置 整个 表格 属性 


选中 整个 表格 后 ， 选 择 【 窗 口 】 一 【属性 】 菜 单 命令 或 按 Ctrl+F3 组 合 键 ， 即 可 打开 表格 
的 【属性 】 面 板 ， 如 图 8-17 所 示 。 
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8-17 ”表格 的 【属性 】 面 板 


在 表格 的 【属性 】 面 板 中 ， 可 以 对 表格 的 行 、 宽 、 对 齐 方式 等 参数 进行 设置 。 不 过 ， 对 
表格 的 高 度 一 般 不 需要 进行 设置 ， 因 为 表格 会 根据 单元 格 中 所 输入 的 内 容 自 动 调整 。 


8.4 操作 表格 


表格 创建 完成 后 ， 还 可 以 对 表格 进行 操作 ， 如 调整 表格 的 大 小 、 增 加 或 删除 表格 中 的 行 
与 列 、 合 并 与 拆 分 单元 格 等 。 


8.4.1 案例 7 一 一 调整 表格 的 大 小 


创建 表格 后 ， 可 以 根据 需要 调整 表格 或 表格 的 行 、 列 的 宽度 或 高 度 。 整 个 表格 的 大 小 被 
调整 时 ， 表 格 中 所 有 的 单元 格 将 成 比例 地 改变 大 小 。 

调整 行 和 列 大 小 的 方法 如 下 。 

要 改变 行 的 高 度 ， 将 鼠标 指针 置 于 表格 两 行 之 间 的 界线 上 ， 当 鼠标 指针 变 成 地 形状 时 上 
下 拖 动 鼠标 即 可 ， 如 图 8-18 所 示 。 
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要 改变 列 的 宽度 ， 将 鼠标 指针 置 于 表格 两 列 之 间 的 界线 上 ， 当 鼠标 指针 变 成 沾 形状 时 左 
右 拖 动 即 可 ， 如 图 8-19 所 示 。 
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Chody> EBL tr <tdy | tac x 6v ea 相国 芭 | 482 x 335v 
图 8-18 改变 行 的 高 度 8-19 改变 列 的 宽度 
调整 表格 大 小 的 方法 如 下 。 


选中 表格 后 拖 动 选 择 手柄 ， 沿 相应 的 方向 调整 大 小 。 拖 动 右 下 角 的 手柄 ， 可 在 两 个 方向 
上 调整 表格 的 大 小 (宽度 和 高 度 )， 如 图 8-20 所 示 。 
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图 8-20 ”调整 表格 的 大 小 


8.4.2 ”案例 8 一 一 增加 行 和 列 


(1) 要 在 当前 表格 中 增加 行 和 列 ， 可 以 进行 以 下 几 种 操作 之 一 。 

Q@ 将 光标 移动 到 要 插入 行 的 下 一 行 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【表格 】 一 【 插 
入 行 】 命 令 ， 如 图 8-21 所 示 。 

@ 将 光标 移动 到 要 插入 行 的 下 一 行 ， 选 择 【 修 改 】 一 【表格 】 一 【插入 行 】 菜 单 命 
令 ， 如 图 8-22 所 示 。 
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8-21 在 右键 快捷 菜单 中 选择 【插入 行 】 命 令 图 8-22 选择 【插入 行 】 菜 单 命令 


@ 将 光标 移动 到 要 插入 行 的 单元 格 ， 按 Cul+M 组 合 键 ， 即 可 插入 行 ， 如 图 8-23 所 示 。 
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图 8-23 插入 行 








河田 名 刘 亲 六 从 一 加 冲 沼 加 本 二 可 


Se 使 用 键盘 也 可 以 在 单元 格 中 移动 光标 ， 按 Tab 键 可 将 光标 移动 到 下 一 个 单元 
尽 格 ， 按 Shift+Tab 组 合 键 可 将 光标 移动 到 上 一 个 单元 格 。 在 表格 最 后 一 个 单元 格 中 


按 Tab 键 ， 将 自动 添加 一 行 单元 格 。 


(2) 要 在 当前 表格 中 插入 列 ， 可 以 进行 以 下 几 种 操作 之 一 。 

@ 将 光标 移动 到 要 插入 列 的 右边 一 列 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【表格 】 一 
【插入 列 】 命 令 ， 如 图 8-24 所 示 。 

@ ”将 光标 移动 到 要 插入 列 的 右边 一 列 ， 选 择 【 修 改 】 一 【表格 】 一 【插入 列 】 菜 单 命 
令 ， 如 图 8-25 所 示 。 


罗 GG 








图 8-24 在 右键 快捷 菜单 中 选择 【插入 列 】 命 令 8-25 选择 【插入 列 】 菜 单 命令 


@@， 将 光标 移动 到 要 插入 列 的 右边 一 列 ， 按 CtrltShifttA 组 合 键 ， 即 可 插入 列 ， 如 图 8-26 
所 示 。 


























8-26 插入 列 
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上 在 插入 列 时 ， 表 格 的 宽度 不 会 改变 ， 但 随 着 列 数 的 增加 ， 列 的 宽度 会 相应 
地 减 小 。 


要 删除 行 或 列 ， 可 以 进行 以 下 几 种 操作 之 一 。 
(1) 选 定 要 删除 的 行 或 列 ， 按 Delete 键 即 可 删除 。 


Sn 使 用 Delete 键 可 以 删除 多 行 或 多 列 ， 但 不 能 删除 所 有 的 行 或 列 。 如 果 要 删除 
SS 整个 表格 ， 则 需要 先 选 中 整个 表格 ， 然 后 按 Delete 键 即 可 删除 。 





(2) 将 光标 放置 在 要 删除 的 行 或 列 中 ， 选 择 【 修 改 】 一 【表格 】 一 【删除 行 】 或 【删除 
列 】 菜 单 命令 ， 即 可 删除 行 或 列 ， 如 图 8-27 所 示 。 
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图 8-27 选择 【删除 列 】 菜单 命令 
8.4.4 案例 10 一 一 剪 切 、 复 制 和 粘贴 单元 格 


1. 剪 切 、 粘 贴 单元 格 (实现 移动 单元 格 功 能 ) 


移动 单元 格 可 使 用 【 剪 切 】 和 【粘贴 】 命 令 来 完成 。 移 动 单元 格 的 具体 操作 步骤 如 下 。 

EECIDp 选中 要 移动 的 一 个 或 多 个 单元 格 ， 如 图 8-28 所 示 。 

EDpy 选择 【编辑 】 一 【 剪 切 】 菜 单 命令 ， 可 将 选中 的 一 个 或 多 个 单元 格 从 表格 中 前 
切 出 来 ， 如 图 8-29 所 示 。 

ECERB) 将 光标 置 于 需要 粘贴 单元 格 的 位 置 ， 选 择 【 编 辑 】 一 【粘贴 】 菜 单 命 令 即 可 ， 
如 图 8-30 所 示 。 
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拱 消 (U) 调整 列 的 尺 十 Cn+Z 
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ey md | 选择 性 粘贴 (S) Cr+Shift+y 
图 8-28 选中 单元 格 图 8-29 选择 【 剪 切 】 菜 单 命令 图 8-30 ”粘贴 单元 格 


呈 。 。 所 有 被 选中 的 单元 格 必须 是 连续 的 且 形成 的 区 域 对 矩形 才能 被 剪 切 或 复制 。 
SS 对 于 表格 中 的 某 些 行 或 列 ， 使 用 【 藤 切 】 命 令 可 将 所 选中 的 行 或 列 删 除 ， 否 则 仅 
删除 单元 格 中 的 内 容 和 格式 。 


2. 复制 和 粘贴 单元 格 


要 粘贴 多 个 单元 格 ， 剪 贴 板 的 内 容 必 须 和 表格 的 格式 保持 一 致 。 复 制 、 粘 贴 单 元 格 的 具 
体操 作 步 骤 如 下 。 

EEC 选中 要 复制 的 单元 格 ， 选 择 【 编 辑 】 一 【拷贝 】 菜 单 命令 ， 如 图 8-31 所 示 。 

EECDRPD 将 光标 置 于 需要 粘贴 单元 格 的 位 置 ， 选 择 【 编 辑 】 一 【粘贴 】 菜 单 命令 即 可 ， 














如 图 8-32 所 示 。 

WD) sv EA) 修改 (M) (0) 
护 消 (U) 调整 列 的 尺 十 Cer+Z 
重 包 (R) 油 坚 列 的 尺寸 Guty 
疯 切 0 Cerl+X 

ON he 
粘贴 (P) Cerl+V 
选择 性 粘贴 (S)… Ctrl+Shift+V 

图 8-31 选择 【拷贝 】 菜 单 命令 图 8-32 ”粘贴 单元 格 


8.4.5 ”案例 11 一 一 合并 和 拆 分 单元 格 


1. 合并 单元 格 


只 要 选择 的 单元 格 区 域 是 连续 的 矩形 ， 就 可 以 对 单元 格 进行 合并 操作 ， 生 成 一 个 跨 多 行 
或 多 列 的 单元 格 ， 否则 将 无 法 合并 。 





合并 单元 格 的 具体 操作 步骤 如 下 。 
EEC 在 文档 窗口 中 选中 要 合并 的 单元 格 ， 如 图 8-33 所 示 。 
台新 闻 资 讯 加 
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8-33 ”选中 要 合并 的 单元 格 
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国 于 BY 执行 下 列 任意 一 种 操作 即 可 合并 单元 格 。 

(D 选择 【修改 】 一 【表格 】 一 【合并 单元 格 】 菜 单 命令 ， 如 图 8-34 所 示 。 

(2) 单 击 【 属 性 】 面 板 中 的 【合并 单元 格 】 按 钮 加 |。 

(3) 按 下 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选择 【表格 】 一 【合并 单元 格 】 命 令 。 

合并 完成 后 ， 合 并 前 各 单元 格 中 的 内 容 将 放 在 合并 后 的 单元 格 里 面 ， 如 图 8-35 所 示 。 

















图 8-34 选择 【合并 单元 格 】 菜 单 命令 图 8-35 合并 之 后 的 单元 格 


2. 拆 分 单元 格 


拆 分 单元 格 是 将 选中 的 单元 格 拆 分 成 行 或 列 。 拆 分 单元 格 的 具体 操作 步骤 如 下 。 
EC 将 光标 放置 在 要 拆 分 的 单元 格 中 或 选中 一 个 单元 格 ， 如 图 8-36 所 示 。 
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图 8-36 选中 要 拆 分 的 单元 格 


四 TPP 执行 下 列 任意 一 种 操作 即 可 实现 拆 分 单元 格 。 

(1) 选择 【修改 】 一 【表格 】 一 【 拆 分 单元 格 】 菜 单 命令 。 

(2) 单 击 【 属 性 】 面 板 中 的 【 拆 分 单元 格 】 按 钮 站 |。 

(3) 按 下 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选择 【表格 】 一 【 拆 分 单元 格 】 命 令 。 

ECEDRB) 弹出 【 拆 分 单元 格 】 对 话 框 ， 在 【把 单元 格 拆 分 】 选 项 组 中 可 选择 【 行 】 或 
【 列 】 单 选 按 钮 ， 在 【 列 数 】 或 【 行 数 】 微 调 框 中 可 输入 要 拆 分 成 的 列 数 或 行 数 ， 如 
图 8-37 所 示 。 

EECGD) 单 击 【确定 】 按 钮 ， 即 可 拆 分 单元 格 ， 如 图 8-38 所 示 。 



































| 折 分 单元 格 x 录 新 邮资 讯 
| 1 后 文政 治 
tt | a 昭 
生 数 加 :EE 国 | 二 汉语 化 学 
地 理 
到 而 5 医 末 
8-37 【 拆 分 单元 格 】 对 话 框 8-38” 拆 分 后 的 单元 格 


8.5 ”操作 表格 数据 


在 制作 网 页 时 ， 可 以 使 用 表格 来 布局 页 面 。 使 用 表格 时 ， 在 表格 中 既 可 以 输入 文字 ， 也 
可 以 插入 图 像 ， 还 可 以 插入 其 他 的 网 页 元 素 。 在 网 页 的 单元 格 中 还 可 以 嵌 套 一 个 表格 ， 这 样 
就 可 以 使 用 多 个 表格 来 布局 页 面 。 


8.5.1 案例 12 一 一 在 表格 中 输入 文本 


在 需要 输入 文本 的 单元 格 中 单 击 ， 即 可 在 表格 中 输入 文本 。 单 元 格 在 输入 文本 时 可 以 自 
动 扩展 ， 如 图 8-39 所 示 。 
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图 8-39 在 单元 格 中 输入 文本 


8.5.2 ”案例 13 一 一 在 表格 中 插入 图 像 


在 表格 中 插入 图 像 是 制作 网 页 过 程 中 常见 的 操作 之 一 ， 其 具体 的 操作 步骤 如 下 。 

ECDD 将 光标 放置 在 需要 插入 图 像 的 单元 格 中 ， 如 图 8-40 所 示 。 

ECDUD) 单 击 【插入 】 面 板 【 常 用 】 选 项 卡 中 的 【图 像 】 按 钮 ， 或 选择 【插入 】 一 【图 
像 】 菜 单 命令 ; 或 从 【插入 】 面 板 中 拖 动 【图像 】 按 钮 到 单元 格 中 ， 如 图 8-41 所 示 。 
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图 8-40 选中 要 插入 图 像 的 单元 格 图 8-41 【常用 】 选 项 卡 
EEJeps 打开 【选择 图 像 源 文件 】 对 话 框 ， 在 其 中 选择 需要 插入 表格 中 的 图 片 ， 如 
图 8-42 所 示 。 


EGG 单 击 【确定 】 按 钮 ， 即 可 将 选中 的 图 片 添加 到 表格 中 ， 如 图 8-43 所 示 。 
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8-42 【选择 图 像 源 文件 】 对 话 框 8-43 ”在 表格 中 插入 图 片 


8.5.3 ”案例 14 一 一 表格 中 的 数据 排序 

表格 中 的 排序 功能 主要 是 针对 具有 格式 的 数据 表格 ， 是 根据 表格 列表 中 的 数据 来 排序 
的 。 具 体操 作 步 骤 如 下 。 

本 TTY 选中 要 排序 的 表格 ， 如 图 8-44 所 示 。 


EEIP9 选择 【命令 】 一 【排序 表格 】 菜 单 命令 ， 打 开 【 排 序 表格 】 对 话 框 ， 在 其 中 可 
以 根据 需要 对 表格 的 排序 参数 进行 设置 ， 如 图 8-45 所 示 。 


振 字 表格 x 
摸 序 接 : | 到 + 
顺序 : 按 数 字 顺 序 妆 [ 刊 序 ~ 应 用 
了 消 
2 天 一 
顺 条， 按 字 国 师 序 3 司 








选 顺口 诽 序 包含 第 一 行 
口 排序 标题 行 
口 措 记 注 行 
口 完成 挤 序 二 所 有 行 所 色 保持 不 




















图 8-44 选中 要 排序 的 表格 图 8-45 【排序 表格 】 对 话 框 


ECESRUS9 单 击 【 确 定 】 按 钮 ， 即 可 完成 对 表格 的 排序 。 本 例 是 按照 表格 第 4 列 数字 的 降 
序 进行 排列 的 ， 如 图 8-46 所 示 。 


学 生 姓名 | 性 别 
c | 勇 























A | 妈 
B | 妈 
D | 


图 8-46 ”排序 完成 后 的 表格 
8.5.4 ”案例 15 一 一 导入 Excel 表格 数据 


在 编辑 表格 的 过 程 中 ， 用 户 可 以 将 Excel 表格 中 的 数据 直接 导入 到 Dreamweaver CC 之 
中 ， 方 便 用 户 引用 数据 ， 导 入 Excel 数据 的 操作 步骤 如 下 。 


二 
Gi 






ey 


EEDUD 启动 Dreamweaver CC， 新 建 一 个 网 页 文档 ， 将 光标 定位 在 编辑 窗口 中 ， 如 图 8-47 
所 示 。 
ECERP9 选择 【文件 】 一 【导入 】 一 【了 Excel 文档】 菜单 命令 ， 如 图 8-48 所 示 。 
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EXEj su 国 3535 NN 
图 8-47 新建 空 白文 档 图 8-48 选择 【Excel 文档 】 菜 单 命令 NN 
区 BY 弹出 【导入 Excel 文档 】 对 话 框 ， 在 其 中 选择 准备 导入 的 Excel 文档 ， 如 图 8-49 NS 
所 示 。 
EGG 单 击 【 打 开 】 按钮 ， 即 可 将 Excel 文档 中 的 数据 导入 到 网 页 之 中 ， 如 图 8-50 所 示 。 
RE 
人 EE 
me 
a 
中 » 
ss 
TO [op 四 国画 ixaiv 
图 8-49 选择 要 导入 的 Excel 文档 8-50 ”导入 Excel 文档 


8.6 ”综合 案例 一 一 使 用 表格 布局 网 页 


使 用 表格 可 以 将 网 页 设计 得 更 加 合理 ， 可 以 将 网 页 元 素 非 常 轻 松 地 放置 在 网 页 中 的 任何 
位 置 。 有 具体 操作 步骤 如 下 。 
EEC 打开 资源 文件 中 的 “ch08g\indexhtm” 文 件 ， 将 光标 放置 在 要 插入 表格 的 位 
置 ， 如 图 8-51 所 示 。 
ESDpy 单 击 【 插 入 】 面 板 【 常 用 】 选 项 卡 中 的 【表格 】 按 钮 。 弹 出 【表格 】 对 话 杠 ， 
将 【 行 数 】 和 【 列 】 均 设置 为 2，【 表 格 宽度 】 设 置 为 100%，【 边 框 粗细 】 设 置 为 
0，【 单 元 格 边 距 】 设 置 为 0，【 单 元 格 间距 】 设 置 为 0， 如 图 8-52 所 示 。 
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8-51 ”打开 素材 文件 











图 8-52 【表格 】 对 话 框 


EEJSp 单 击 【 确 定 】 按 钮 ， 一 个 2 行 2 列 的 表格 就 插入 到 了 页 面 中 ， 如 图 8-53 所 示 。 
EC 将 光标 放置 在 第 一 行 第 一 列 单元 格 中 ， 单 击 【 插 入 】 面 板 【 常 用 】 选 项 卡 中 的 
【图 像 】 按 钮 。 弹 出 【选择 图 像 源 文 件 】 对 话 框 ， 从 中 选择 图 像 文 件 ， 如 图 8-54 


所 示 。 
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图 8-53 插入 表格 
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8-54 ”选择 要 插入 的 图 片 


莉 于 BY 单 击 【 确 定 】 按 钮 ， 插 入 图 片 ， 如 图 8-55 所 示 。 
EECDUD 将 光标 放置 在 第 二 行 第 一 列 单元 格 中 ， 在 【属性 】 面 板 中 将 【背景 颜色 】 设 置 


为 眶 3E3E3， 如 图 8-56 所 示 。 
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图 8-55 插入 图 片 
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图 8-56 设置 单元 格 的 背景 色 


EDDD 在 单元 格 中 输入 文本 ， 在 【属性 】 面 板 中 设置 文本 的 【大 小 】 为 16 像素 ， 如 
图 8-57 所 示 。 

国 了 BY 选择 第 二 列 的 两 个 单元 格 ， 在 单元 格 的 【属性 】 面 板 中 单 击 回 按钮 ， 将 单元 格 
合并 ， 如 图 8-58 所 示 。 
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图 8-57 设置 文本 大 小 图 8-58 合并 选 定 的 单元 格 


EECSUD 选 定 合并 后 的 单元 格 ， 选 择 【 插 入 】 一 【表格 】 菜 单 命令 。 弹 出 【表格 】 对 话 
框 ， 将 【 行 数 】 设 置 为 2，【 列 】 设 置 为 1， 【表格 宽度 】 设 置 为 100%，【 边 框 粗 
细 】 设 置 为 0，【 单 元 格 边 距 】 设 置 为 0，【 单 元 格 间距 】 设 置 为 0， 如 图 8-59 








所 示 。 
EC 单 击 【确定 】 按 钮 ， 一 个 两 行 一 列 的 表格 就 插入 到 了 页 面 中 ， 如 图 8-60 所 示 。 
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8-59 【表格 】 对 话 框 8-60 插入 表格 


EC 将 光标 放置 到 第 一 行 的 单元 格 中 ， 单 击 【插入 】 面 板 【 常 用 】 选 项 卡 中 的 【图 
像 】 按 钮 。 弹 出 【选择 图 像 源 文件 】 对 话 框 ， 从 中 选择 图 片 文件 ， 如 图 8-61 所 示 。 

EDP 单 击 【 确 定 】 按 钮 插入 图 片 ， 如 图 8-62 所 示 。 

EEC 重复 上 述 步骤 ， 在 第 二 行 单元 格 中 插入 图 片 ， 如 图 8-63 所 示 。 

国 于 EY》 保存 文档 ， 按 F12 键 在 正 浏览 器 中 预览 效果 ， 如 图 8-64 所 示 。 
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图 8-63 再 次 插入 图 片 图 8-64 ”预览 网 页 


8.7 疑难 解 惑 

疑问 1: 如 何 使 用 表格 拼接 图 片 ? 

答 : 对 于 一 些 较 大 的 图 片 ， 读 者 可 将 其 切 分 成 几 个 部 分 ， 然 后 再 利用 表格 把 它们 拼接 到 
一 起 ， 这 样 就 可 以 加 快 图 片 的 下 载 速度 。 

有 具体 的 操作 方法 是 : 先 用 图 像 处 理工 具 (如 Photoshop) 把 图 片 切 分 成 几 个 部 分 (具体 切 图 方 
法 读者 可 以 参照 本 书 中 的 相关 章节 )， 然 后 在 网 页 中 插入 一 个 表格 (其 行列 数 与 切 分 的 图 片 相 
同 )， 在 表格 属性 中 将 边框 粗细 、 单 元 格 边 距 和 单元 格 间距 均 设置 为 0， 再 把 切 分 后 的 图 片 按 
照 原来 的 位 置 关 系 插 进 相应 的 单元 格 中 即 可 。 

疑问 2: 导入 到 网 页 中 数据 混乱 怎么 办 ? 


答 : 一 般 出 现 这 种 数据 混乱 的 原因 是 由 于 全 角 造 成 的 ， 因 为 此 时 记事 本 中 分 号 为 全 角 。 


用 户 需要 重新 将 记事 本 中 的 全 角 分 号 修改 为 半角 分 号 ， 即 修改 为 英文 状态 下 输入 ， 然 后 再 导 
入 到 网 页 中 即 可 解决 该 数据 问题 。 
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第 9 章 
批量 制作 网 页 一 
使 用 模板 和 库 


使 用 模板 可 以 为 网 站 的 更 新 和 维护 提供 极 大 的 方便 ， 仅 修改 网 站 的 模板 即 可 完 
成 对 整个 网 站 中 页 面 的 统一 修改 。 本 章 就 来 介绍 如 何 使 用 模板 批量 制作 风格 统一 的 
网 页 。 
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9.1 创建 模板 


使 用 模板 创建 文档 可 以 使 网 站 和 网 页 具有 统一 的 结构 和 外 观 。 模 板 实质 上 就 是 作为 创建 
其 他 文档 的 基础 文档 。 在 创建 模板 时 ， 可 以 明确 哪些 网 页 元 素 应 该 长 期 保留 、 不 可 编辑 ， 哪 
些 元 素 可 以 编辑 修改 。 


9.1.1 案例 1 一 一 使 用 菜单 创建 空白 模板 


利用 Dreamweaver CC 的 【文件 】 一 【新 建 】 菜 单 命令 可 以 直接 创建 空白 模板 ， 具 体操 作 
步骤 如 下 。 
国语 动 Dreamweaver CC， 选 择 【 文 件 】 一 【新 建 】 菜 单 命令 ， 如 图 9-1 所 示 。 
EEID) 弹出 【新 建文 档 】 对 话 框 ， 在 【新 建文 档 】 对 话 框 中 选择 【空白 页 】 选 项 ， 在 
【页 面 类 型 】 列 表 框 中 选择 【HTML 模板 】 选 项 ， 如 图 9-2 所 示 。 





Dw E we 查看 白 () 个 改 (M) 

















关闭 (O Cerl+W R 
全 部 关闭 (E) Ctd+Shit+W 国生 
保存 (S) Ctrl+S 
另存 为 (A).. Curl+Shift+s i -6 
图 9-1 选择 【新 建 】 菜 单 命令 图 9-2 【新 建文 档 】 对 话 框 
ECRB) 单 击 【创建 】 按 钮 即 可 创建 一 个 空白 的 模板 文档 ， 如 图 9-3 所 示 。 
日 回国 4 xs 























9-3 ”创建 空白 模板 文档 


9.1.2 案例 2 一 一 在 【资源 】 面 板 中 创建 模板 
在 【资源 】 面 板 中 创建 模板 的 具体 操作 步骤 如 下 。 


EC 选择 【窗口 】 一 【资源 】 菜 单 命令 ， 打 开 【 资 源 】 面 板 ， 如 图 9-4 所 示 。 
EDUD9 在 【资源 】 面 板 中， 单 击 【 模 板 】 按 钮 号 ，【 资 源 】 面 板 将 变 成 模板 样式 ， 如 
图 9-5 所 示 。 





图 阶 ; 轿 站 点 口 收藏 由 


ks 若 要 显示 让 点 资源 ， 按 下 C 忆 新 
图 标 * 
v 





9-4 【资源 】 面 板 图 9-5 模板 样式 


EETBY 单 击 【 资 源 】 面 板 右 下 角 的 【新 建 模板 】 按 钮 ;或 在 【资源 】 面 板 的 列表 中 右 
击 ， 在 弹出 的 快捷 菜单 中 选择 【新 建 模板 】 命 令 ， 如 图 9-6 所 示 。 

国 了 YY 一 个 新 的 模板 就 被 添加 到 了 模板 列表 中 。 选 中 该 模板 ， 然 后 修改 模板 的 名 称 即 
可 完成 创建 ， 如 图 9-7 所 示 。 


家 人 
着 要 虹 直 让 点 深 尖 , 扩 CRNN 站 
图 标 。 


BO Es 首 四 | 时 
SET ELI 





图 9-6 选择 【新 建 模板 】 命 令 图 9-7 选中 创建 的 模板 


mm 如 果 要 编辑 创建 完成 的 空白 模板 ， 可 单 击 【编辑 〗 按 钮 ，Dreamweaver 会 在 
Ne 【 资源】 面板 和 Templates 文件 夹 中 创建 一 个 新 的 空 模板 。 单 击 【 资 源 〗 面 板 右 
上 角 的 【菜单 〗 按 钮 ; 或 在 要 重 命名 的 模板 上 右 击 ， 从 弹出 的 快捷 菜单 中 选择 
【 重 命名 】 命 令 ， 可 以 对 模板 重 命名 。 在 重 命名 模板 时 ，Dreamweaver 的 模板 参 

数 会 自动 更 新 使 用 该 模板 的 文档 。 


9.1.3 ”案例 3 一 一 基于 现 有 网 页 创建 模板 


如 果 用 户 要 创建 的 网 页 与 已 经 存在 的 某 个 网 站 的 结构 相似 ， 可 基于 该 网 页 创建 模板 ， 再 
经 过 简单 设计 与 修改 ， 从 而 快速 创建 新 模板 。 
基于 现 有 网 页 创建 模板 的 具体 操作 步骤 如 下 。 


笨 状 渐 菏 玫 集 一 一 沼 到 答 盐 有 邑 举 需 6 外 便 
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EC) 打开 资源 文件 中 的 “ch09\index.htm” 文 件 ， 如 图 9-8 所 示 。 

EC 选择 【文件 】 一 【另存 为 模板 】 菜 单 命令 ， 弹 出 【另存 模板 】 对 话 框 ， 在 【站 
点 】 下 拉 列 表 框 中 选择 保存 的 站 点 “模板 ”， 在 【另存 为 】 文 本 框 中 输入 模板 名 ， 
如 图 9-9 所 示 。 















































习 
Ci 
Ea 
2 为: 项 癌 EE 
图 9-8 打开 素材 文件 图 9-9 【另存 模板 】 对 话 杠 


EECRE) 单 击 【保存 】 按 钮 ， 弹 出 信息 提示 框 ， 如 图 9-10 所 示 。 
EC 单 击 【是 】 按 钮 ， 即 可 将 网 页 文件 保存 为 模板 ， 如 图 9-11 所 示 。 




















和 有 
ee ; :is 
Cw Es 四 ee 
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图 9-10 ”信息 提示 框 图 9-11 基于 现 有 网 页 创建 的 模板 


9.2 管理 模板 


模板 创建 好 后 ， 根 据 实际 需要 可 以 随时 对 模板 的 样式 、 内 容 进 行 更 改 。 更 改 模板 后 ， 
Dreamweaver 会 对 应 用 该 模板 的 所 有 网 页 进行 同步 更 新 。 


9.2.1 案例 4 一 一 定义 可 编辑 区 域 


创建 模板 之 后 ， 用 户 需 要 根据 自己 的 具体 要 求 对 模板 中 的 内 容 进行 编辑 ， 即 指定 哪些 内 
容 可 以 编辑 ， 哪 些 内 容 不 能 编辑 。 可 编辑 区 是 页 面 中 变化 的 部 分 ; 不 可 编辑 区 是 各 页 面 中 相 
对 保持 不 变 的 部 分 。 

定义 模板 可 编辑 区 域 的 具体 操作 步骤 如 下 。 
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yD 


ED 打开 资源 文件 中 的 “ch09\Templates\ 模 板 .dwt” 文 件 ， 如 图 9-12 所 示 。 
EEJDy 将 光标 放置 在 要 插入 可 编辑 区 域 的 位 置 ， 选 择 【 插 入 】 一 【模板 】 一 【可 编辑 
区 域 】 菜 单 命令 ， 如 图 9-13 所 示 。 








开关 滴 其 斑 售 一 一 沼 到 认 址 艺 尘 山 6 小 全 





Bt 
es 
人 
合用 撤 杰 布局 C55 的 揭示， 雹 可 以 充 和 时 这 些 证 释 . 热 最 9 人 本 片断) | | 
动 多 的 站 点 。 政 了 婚 有 关 这 些 CSS 布局 中 使 用 的 方法 的 可 计 区 域 [D) 
信息 请 网 读 Adobe 开发 人 员 中 心 上 的 以 下 文章 重生 区 域 fR) 
+ http://www.adobe.com/go/adc_ css layouts. TCR 
图 9-12 打开 素材 文件 图 9-13 ”选择 【可 编辑 区 域 】 菜 单 命令 NN 
区 于 BY 弹出 【新 建 可 编辑 区 域 】 对 话 框 ， 在 【名 称 】 文 本 框 中 输入 名 称 ， 如 图 9-14 NN 
所 示 。 NN 
Dr 命名 一 个 可 编辑 区 域 时 ， 不 能 使 用 单 引号 ()、 双 引号 (")、 尖 括号 (< >) 和 
& 等 
ECG 单 击 【 确 定 】 按 钮 ， 即 可 插入 可 编辑 区 域 。 在 模板 中 ， 可 编辑 区 域 会 被 突出 显 
示 ， 如 图 9-15 所 示 。 





te 














新 建 可 编 铝 区 域 x 
请 往 章 ， 这 些 布局 的 CSS 融 有 大 量 注释 如 果 你 的 大 部 
本 作者 在 襄 计 规 团 中 志 行 ， 请 快 计 济 览 一 下 代码 ， 获 取 有 关 
取消 ”| 使 肌 液 态 布局 C55 的 提示 ,您 可 以 先 出 除 这 些 往 释然 
此 区 域 桂 可 以 在 基于 该 模 析 的 文档 动 你 的 站 点 。 间 了 解 有 关 这 些 CSS 布局 中 使 用 的 方法 的 
中 进行 编辑 。 部 助 信息 ， 请 网 读 Adobe 开发 人 员 中 心 上 的 以 下 文章 
+ http://www.adobe.com/ao/adc css lavouts。 、 
i 辣 | 且 GTSr 
图 9-14 【新 建 可 编辑 区 域 】 对 话 框 9-15 ”突出 显示 可 编辑 区 域 


ECEDD 选择 【文件 】 一 【保存 】 菜 单 命令 ， 保 存 模板 ， 如 图 9-16 所 示 。 


导语 新 建 (N)-. CrN 
| FF(O)-. Cao 
打开 是 话 的 文件 [站 > 
OO Ca>W 
SBE) CusShit-W 
与 下 为 内 CH+ShifS 
保存 全 关 ( 
保 丰 所 有 杠 关 文 给 fR) 
与 让 为 楼 板 (M)- 


9-16 选择 【保存 】 菜 单 命令 
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9.2.2 ”案例 5 一 一 定义 可 选区 域 


可 选区 域 是 模板 中 的 区 域 ， 可 将 其 设置 为 在 基于 模板 的 文件 中 显示 或 隐藏 ， 当 要 为 在 文 
件 中 显示 的 内 容 设置 条 件 时 ， 即 可 使 用 可 选区 域 ， 定 义 可 选区 域 的 操作 步骤 如 下 。 
EE 打开 资源 文件 中 的 “ch09\Templates\ 模 板 .dwt” 文 件 ， 选 中 准备 设置 可 选区 域 的 
页 面 导航 所 在 的 文本 ， 如 图 9-17 所 示 。 
TY 选择 【插入 】 一 【模板 】 一 【可 选区 域 】 菜 单 命令 ， 如 图 9-18 所 示 。 


EE -Dx 
请 注意 ， 这 本 布局 的 CSS 营 有 大 量 往 释 , 各 果 你 的 大 部 分 ~ 
作者 在 设计 视图 中 斌 行 请 快速 浏览 一 下 代码 ， 获 职 有 关 丸 
使 用 浪 态 布 局 CSS 的 提示 。 你 可 以 先 删 辽 这 些 和 注释 ， 然 后 | 
焦 的 站 点 。 要 了 解 有 关 议 些 CSS 布局 中 使 用 的 方法 的 更 
阅读 Adobe 开发 人 员 中 心 上 的 以 下 文章 
/www.adobe.com/go/adc css layouts。 



















由 于 所 有 列 都 是 笃 动 的 ， 因 此 ， 此 布局 在 .footer 规则 中 3 
dlear:both 声明 。 此 宇 除 方法 强制 使 .container 了 解 列 
结束 习 置 ， 以 便 显 示 在 .container 中 放置 的 任何 边 柜 或 基 
颜色 。 如 时 您 的 设计 要 求 您 从 .container 中 狮 除 .footer 
则 需要 采用 其 它 清除 方法 。 最 可 靠 的 方法 是 在 最 后 一 个 冬 有 v 


Ctrl+Ak+V 








Ci oatuiaeryadir reteot [7 CE EE 





9-17 ”选择 文本 图 9-18 选择 【可 选区 域 】 菜 单 命令 
四 TBY 弹出 【新 建 可 选区 域 】 对 话 框 ， 在 【名 称 】 文 本 框 中 输入 可 选区 域 的 名 称 ， 这 
里 输入 “可 选区 域 1”， 如 图 9-19 所 示 。 
ECG 单 击 【确定 】 按 钮 ， 即 可 将 选择 的 文本 区 域 定义 为 可 选区 域 ， 如 图 9-20 所 示 。 





， 区 本 CSS 大 有 天 重 注释 ， 怠 BEE 
作 部 在 设计 视图 中 斌 行 ， 请 快速 浏览 一 下 代码 ， 获 取 有 关 丸 
使用 注 态 布局 CS5 的 提示 。 您 可 以 先 猎 除 这 些 注 释 ， 然 后 | 
动 您 的 站 点 。 要 了 和 解 有 关 这 些 CSS 市 局 中 使 用 的 方法 的 更 | 
信息 ， 请 阅读 Adobe 开发 人 员 中 心 上 的 以 下 ; 
WE 








Do 


由 于 所 有 列 部 是 浮动 的 ， 因 此 ， 此 市 局 在 .footer 规则 中 
dear:both 声明 。 此 清 际 方法 强 烤 使 .container 了 解 列 
凌 计 位置， 以 便 尼 示 在 .container 中 放置 的 任何 边 枉 或 
颜色 。 如 时 您 的 设计 要 求 您 从 container 中 删除 .footer 
则 需要 采用 其 它 清 际 方法 。 景 可 竺 的 方法 是 在 最 后 一 个 泽 5Y 
rt PENG FE 同 画 mvaav 





























9-19 【新 建 可 选区 域 】 对 话 框 9-20 ”完成 定义 可 选区 域 设置 


9.2.3 ”案例 6 一 一 定义 重复 区 域 


重复 区 域 是 能 够 根据 需要 在 基于 模板 的 页 面 中 赋值 任意 次 数 的 模板 部 分 。 在 网 页 中 ， 重 
复 区 域 通常 用 于 表格 ， 不 过 ， 也 能 够 为 其 他 页 面 元 素 定义 重复 区 域 。 
定义 重复 区 域 的 操作 步骤 如 下 。 
ES 打开 资源 文件 中 的 “ch09\Templates\ 模 板 .dwt” 文 件 ， 选 中 准备 设置 重复 区 域 的 
文本 ， 如 图 9-21 所 示 。 
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EEJP9 选择 【插入 】 一 【模板 】 一 【重复 区 域 】 菜 单 命令 ， 如 图 9-22 所 示 。 


EE Ex 
则 需要 用 其它 靖 际 方 法 ~ RR 











2 和 


此 布局 的 .header 中 使 用 了 图 像 占 位 符 ， 您 可 能 希望 在 其 | 
旋 教 标 。 建 议 您 中 陈 此 占 位 符 ， 并 将 其 莹 接 为 您 自己 的 局 
藤 标 。 


请 注意 ， 如果 您 使 用 属性 性 查 匡 导航 局 | 使 用 SRC 字 息 的 裔 
图 傻 “而 不 是 玫 际 并 芹 招 占 位 罕 ) ， 则 应 各 际 内 凡 皮 录 和 王 
属性 。 达 些 和 内河 翌 式 仅 用 于 在 济 径 器 中 出 于 演示 目的 而 县 
;标点 位 符 。 四 














EPE 
图 9-21 选择 要 设置 重复 区 域 文本 9-22 选择 【重复 区 域 】 菜 单 命令 


EGRUS 弹出 【新 建 重复 区 域 】 对 话 框 ， 在 【名 称 】 文 本 框 中 输入 重复 区 域 的 名 称 ， 这 
里 输入 “重复 区 域 1”， 如 图 9-23 所 示 。 
EGRZ 单 击 【 确 定 】 按 钮 ， 即 可 将 选择 的 文本 区 域 定义 为 重复 区 域 ， 如 图 9-24 所 示 。 


CE qdmt oorvb- -Ox 
则 需 可 采用 其 它 清 除 方法 。 最 可 靠 的 方法 是 在 最 后 一 个 淳 而 ^ 
之 后 (但 在 .container 结束 之 前 ) 溧 加 <br 
class="clearfloat" /> or <dlv 

class="dearfloat"> </div>， 这 具有 相同 的 清除 浆果. 





册 过 党 蒂 导 罕 一 一 潮 习 六 坦 部 苛 者 6 小 鲁 



















罗 GG 














新 建 重复 区 域 X 划 布 局 的 .header 中 使 用 了 图 像 占 位 符 ， 多 可 能 大 在 其 
放 秆 从 慰 ， 建 议 您 | 际 此 上 位 符 ， 并 将 其 莹 换 为 您 自己 的 人 
名 称 : 蕙 夏 EigL |] | 一 一 针 标 
| 取消 
此 区 域 持 多 次 出 现在 基于 该 模板 的 一 请 注 意 ， 如 时 您 入 用 属性 检查 器 导航 到 使 用 SRC 宇 限 的 训 
| 图 像 而 不 是 出 除 并 答 换 占 位 符 》， 则 应 出 除 内 求 少 录 和 宇 
; 属性。 这 些 内 赔 样 吉 公 用 于 在 浏览 吕 中 出 二 局 示 趾 的 而 
| rs eontainer) (ir. Heatenty Ch3) amtonvIoto ropoary] 下 如 国 so :aeev 
9-23 【新 建 重复 区 域 】 对 话 框 9-24 ”完成 重复 区 域 的 定义 


9.2.4 ”案例 7 一 一 从 模板 中 分 离 文 档 


利用 从 模板 中 分 离 功能 ， 可 以 将 文档 从 模板 中 分 离 ， 分 离 后 模板 中 的 内 容 依然 存在 。 文 
档 从 模板 中 分 离 后 ， 文 档 的 不 可 编辑 区 域 会 变 成 可 编辑 区 ， 这 就 给 修改 网 页 内 容 带 来 很 大 
方便 。 
从 模板 中 分 离 文 档 的 具体 操作 步骤 如 下 。 
E53 打开 资源 文件 中 的 “ch09\ 模 板 .html” 文 件 ， 从 图 9-25 中 可 以 看 出 页 面 处 于 不 可 
编辑 状态 。 
本 了 TB 选择 【修改 】 一 【模板 】 一 【从 模板 中 分 离 】 菜 单 命令 ， 如 图 9-26 所 示 。 
国 于 BY 选择 命令 后 ， 即 可 将 网 页 从 模板 中 分 离 出 来 ， 此 时 即 可 将 图 像 路 径 重 新 设置 ， 
如 图 9-27 所 示 。 
保存 文档 ， 按 F12 键 在 正 浏览 器 中 预览 效果 ， 如 图 9-28 所 示 。 
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说 明 @ 


请 往 意 ， 这 些 市 局 的 CSS 训 有 大 旦 注释 。 如 果 您 的 大 序 分 
作 都 在 设计 视图 中 进行 ， 请 快速 浏览 一 下 发 码 ， 著 取 有 关 灵 
使 用 以 坊 布 局 C5S 的 提示 。 僵 可 以 先 删 姥 这 些 往 释 ,这 后 
动荡 的 站 点 。 要 了 解 有 关 这 些 CSS 布局 中 使 用 的 方法 的 更 
信息 ， 请 阅读 Adobe 开发 人 员 中 心 上 的 以 下 文章 

+ http://www.adobe.com/go/adc css layouts. 












下 看 E23 


9-25 ”打开 素材 文件 
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说 明 


请 注意 ， 这 些 市 局 的 C55 带 有 大 量 注释 。 如 果 你 的 大 部 分 
作 都 在 设计 视图 中 进行 ， 请 快速 浏览 一 下 代码 ， 著 丙 有 关 
使 用 液态 市 局 CSS 的 提示 。 您 可 以 先 由 际 这 此 注释， 然后 
动 您 的 站 点 。 要 了 解 有 关 这 些 CSS 市 局 中 使 用 的 方法 的 更 


说 明 


请 注意 ,这些 布局 的 CSS 带 有 大 旺 注释 如果 您 的 大 部 分 工 
作者 在 如 寺 视 和 中 进行 ， 读 快 二 浏览 一 下 代码 ， 艾 到 有 关 如 何 
使 用 液 志 布 同 CSS 的 杏 示 。 您 可 以 先 删 除 这 些 注释， 然后 启 
动作 的 站 点 ， 要 了 解 有 关 这 些 CSS 布局 中 使 用 的 方法 的 更 多 





全 读 Adobe 开发 人 员 中 心 上 的 以 下 文章 信息 , 语 阅 读 Adobe 开发 人 员 中 心 上 的 以 下 文章 
bite i btip://www. adobe.com/go/adc css layouts. 


清除 方法 
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图 9-27 将 网 页 从 模板 中 分 离 图 9-28 ”预览 网 页 效果 


9.2.5 ”案例 8 一 一 在 现 有 文档 中 应 用 模板 


在 Dreamweaver CC 中 ， 用 户 可 以 通过 文档 窗口 将 模板 应 用 于 文档 之 中 ， 有 具体 的 操作 步骤 
如 下 。 

ED 启动 Dreamweaver CC， 打 开 准 备 应 用 模板 的 文档 ， 如 图 9-29 所 示 。 

EC 选择 【修改 】 一 【模板 】 一 【应 用 模板 到 页 】 菜 单 命令 ， 如 图 9-30 所 示 。 


动 -ee>> 人 Edwt XHTMD -Ox i (0) ee(O Ss(s) OW) Wit) 

















了 时 性 (P).- Coit 
列 必 局 性 | 站- 
kM 
| A ColeT 
说 明 col 


ee CnsshiftL 


请 注意 ， 这 些 市 局 的 CSS 带 有 大 量 注释 如果 您 的 大 部 分 
作 都 在 设计 视图 中 讲 行 ， 请 快速 浏览 一 下 代码 ， 获 了 有关 
使 用 液态 布局 CSS 的 提示 。 您 可 以 先 出 | 陈 这 些 广 释 ， 然 后 
动 多 的 站 点 。 要 了 和 解 有 关 这 些 CSS 市 局 中 使 用 的 方法 的 更 
请 图 请 Adobe 开发 人 员 中 心 上 的 以 下 文章 

p:/www .adobe.comjaoyadc css lavouts, DER 和 | 


从 可 析 中 分 计 (D) 
i TD) 
下 于 ) seo «327 扒 才 村 析 滞 半 DO 


图 9-29 打开 要 应 用 模板 的 文件 9-30 ”选择 【应 用 模板 到 页 】 菜 单 命令 

















r 


EGRB) 弹出 【选择 模板 】 对 话 框 ， 选 择 准备 应 用 的 模板 ， 单 击 【 选 定 】 按 钮 ， 即 可 应 
用 被 选中 的 模板 对 象 ， 如 图 9-31 所 示 。 

如 果 存 在 不 一 致 的 区 域名 称 ， 将 会 弹出 【不 一 致 的 区 域名 称 】 对 话 框 ， 如 

衣 旧 ”图 9.32 所 示 ， 在 其 中 需要 将 每 一 不 匹配 的 区 域名 称 与 新 区 域名 称 进行 匹配 ， 这 样 








@s 
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ed 
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量 
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才能 应 用 被 选中 的 模板 对 象 。 
不 一 的 区 域名 称 x 
此 文档 中 的 陈 些 区 域 在 新 模板 中 没有 相应 区 域 。 
me = 
3ocment body 慰 解 析 > 
Docment heod 《 款 解 折 》 
远 反 措 掀 x 
MK) ge > 
模板 1); Ei 
1 本 内 容 黎 开 断 区 域 - “| 用 于 所 有 内 容 
E29 [本 | 
回 当 模板 交 突 时 更 新 页 面 (U) 一 
图 9-31 【选择 模板 】 对 话 框 9-32 【不 一 致 的 区 域名 称 】 对 话 框 


9.2.6 ”案例 9 一 一 更 新 模板 和 基于 模板 的 网 页 





用 模板 的 最 新 版 本 更 新 整个 站 点 及 应 用 特定 模板 的 所 有 文档 的 具体 操作 步骤 如 下 。 
打开 资源 文件 中 的 “ch09\Templates\ 模 板 .dwt” 文 件 ， 如 图 9-33 所 示 。 
EEJDy 将 光标 置 于 模板 需要 修改 的 地 方 ， 并 进行 修改 ， 如 图 9-34 所 示 。 


EET 











说 明 


请 注意 ， 这 些 布 局 的 CSS 共有 大 量 往 释 。 如 果 您 的 大 部 分 
作 都 在 设计 视图 中 进行 ， 请 快 训 浏 览 一 下 代码 ， 获 取 有 关 久 
使 用 滚 态 布局 CSS 的 提示 。 您 可 以 先 央 了 这 些 注释 ,然后 
动 您 的 站 点 。 要 了 解 有 关 这 些 C55 布局 中 使 用 的 方法 的 更 
信息 ， 请 阅读 Adobe 开发 人 员 中 心 上 的 以 下 文章 

+ http://www.adobe.com/go/adc css lavouts, 


得 力 文具 | 


请 注音， 这些 布 局 的 CSS 带 有 大 量 注释 .如 果 人 的 大 部 分 
作 都 在 设计 视图 中 进行 ， 请 快速 浏览 一 下 代码 ， 获 取 有 关 
使 用 沪 态 布局 CSS 的 提示 。 您 可 以 先 刑 陈 这 些 往 释 ， 然 后 
动 似 的 站 点。 要 了 解 有 关 这 些 CSS 布局 中 使 用 的 方法 的 更 
信息 ,请 阅读 Adobe 开发 人 员 中 心 上 的 以 下 文章 

* http://www.adobe.com/ao/adc css layouts， 




























YP 
9-33 ”打开 素材 文件 9-34 ”修改 模板 


莉 于 BY 选择 【文件 】 一 【保存 】 菜 单 命令 ， 即 可 保存 更 改 后 的 网 页 。 然 后 打开 应 用 该 
模板 的 网 页 文件 ， 可 以 看 到 更 新 后 的 网 页 ， 如 图 9-35 所 示 。 
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辕 CNUsersqiangu\Doaumenl P - 0 | 屿 却 5Exs 








人 
得 力 文具 
击 提 这 些 布局 的 CSS 带 有 有 大昌 注 释 。 如 军 您 的 大 部 分 工 
各 

动 各 的 站 点 ， 要 了 艇 有 关 这 些 CSS 布局 中 便 用 的 方法 的 更 多 
信息 ， 请 阅读 Adobe 开发 人 员 中 心 上 的 以 下 文章 : 
http://www.ndobe.com/go/adc_css layouts. 
清除 方法 4 











9-35 ”预览 网 页 效果 


9.3 使 用 库 


库 是 一 种 特殊 的 文件 ， 是 一 组 单个 资源 或 资源 副本 ， 库 的 作用 类 似 于 插件 ， 在 页 面 中 可 
以 重复 使 用 ， 它 的 实质 就 是 一 段 可 重复 使 用 的 代码 或 一 部 分 内 容 。 


9.3.1 案例 10 一 一 创建 库 文件 


创建 库 文件 前 需要 创建 一 个 站 点 ， 


件 的 操作 步骤 如 下 。 


随后 打开 【资源 】 面 板 进行 库 文件 的 操作 ， 创 建 库 文 


EEJDp 启动 Dreamweaver CC， 选 择 【 窗 口 】 一 【资源 】 菜 单 命 令 ， 如 图 9-36 所 示 。 
EEI2p 打开 【资源 】 面 板 ， 在 其 中 单 击 【 库 】 按 钮 ， 然 后 在 【 库 】 列 表 的 任意 处 右 





击 ， 在 弹出 的 快捷 菜单 中 选择 【新 建 库 项 】 命 令 ， 如 图 9-37 所 示 。 





Em sm 2 
插入 (1) Cu+F2 

网 人 tm Ct+F3 本 | 辣 afaacisg， NTCaH 
CSS 设计 器 (O Shift+F11 
CSS 过 渡 效 果 (R) 号 
Business Catalyst Ctrl+Shift+B 加 
文件 Fe 
代码 片断 (N) Shift+F9 

图 9-36 选择 【资源 】 菜 单 命令 9-37 ”选择 【新 建 库 项 】 命 令 


EEJRUS 双击 新 建 的 库 文件 进入 名 称 的 可 编辑 状态 ， 输 入 库 名 称 ， 如 这 里 输入 header， 
然后 按 下 Enter 键 完成 重 命名 操作 ， 如 图 9-38 所 示 。 

EC 在 库 文件 中 输入 内 容 ， 输 入 方法 与 普通 页 面相 似 ， 输 入 完毕 后 保存 该 文件 ， 即 
可 完成 创建 库 文件 的 操作 ， 如 图 9-39 所 示 。 


全 178 








中 
到 
外 
已 
下 
四 














9-38 ”输入 库 名 称 


页 面 添加 库 文件 


创建 好 库 文件 后 ， 即 可 在 页 面 中 使 用 库 了 ， 具 体 的 操作 步骤 如 下 。 

EEJD 启动 Dreamweaver CC， 打 开 需 要 添加 库 文件 的 网 页 ， 如 图 9-40 所 示 。 

EEJ2p 打开 【资源 】 面板 ， 在 其 中 选择 库 文 件 ， 按 住 鼠 标 左 键 不 放 ， 将 其 拖 忠 到 页 面 
需要 贬 入 库 文件 的 位 置 ， 这 里 将 header 库 文件 拖 放 到 页 面 头 部 区 域 ， 如 图 9-41 所 示 。 








9-39 创建 的 库 文件 


刑 状 渐 菏 季 集 一 一 沼 到 答 址 有 邑 举 需 6 外 全 
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SA 


bsayy 657 Im] 























日 加 芳 | 40 x 295- 
图 9-40 ”打开 网 页 文件 


ECDIS 设置 完成 后 保存 网 页 
所 示 。 





装 CNUserswqiangu\Doaument 只 -上 | 嫩 天 5 要 w 档 


文帝 误 日” 吾 看 V) 妇 芒 (A) 工具 (帮助 (H) 


以 


图 9-41 选择 库 文件 
， 按 F12 键 ， 即 可 在 浏览 器 中 预览 网 页 效果 ， 如 图 9-42 


i 让 





EDGED# 四 四 





首页 关于 我 们 产品 介绍 


RSL 


帮助 中 心 


v| 








9-42 ”预览 网 页 效果 
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9.3.3 ”案例 12 一 一 修改 并 更 新 库 文 件 


对 库 文 件 进行 修改 后 ， 需 要 对 添加 该 库 文 件 的 页 面 进行 更 新 ， 有 具体 的 操作 步骤 如 下 。 
EGR 启动 Dreamweaver CC， 打 开 【 资 源 】 面 板 ， 在 其 中 选择 要 修改 的 库 文件 ， 这 里 


选择 header 文件 ， 如 图 9-43 所 示 。 
EEJpy 在 打开 的 库 文件 中 对 内 容 进行 修改 ， 如 这 里 将 “帮助 中 心 ” 修 改 为 “联系 我 


们 ”， 如 图 9-44 所 示 。 





ET 


二 < 二 E>> hesderbr 


库 

















国 
所 | 首 关于 我 产品 介 帮助 中 “ 
全 | 页 们 绍 心 
局 
Ped 对 
=] 
晤 
[EN CD 加 四 加 友 wav yov 
图 9-43 【资源 】 面 板 图 9-44 ”修改 内 容 


EEJRUS 修改 好 库 文件 后 ， 在 保存 文件 时 会 打开 【更 新 库 项 目 】 对 话 框 ， 选 择 需要 更 新 


的 网 页 ， 如 图 9-45 所 示 。 
四 YY 单 击 【更 新 】 按 钮 ， 在 打开 的 【更 新 页 面 】 对 话 框 中 对 相关 网 页 进行 更 新 ， 完 


成 后 单 击 【 关 闭 】 按 钮 即 可 ， 如 图 9-46 所 示 。 




















Gt 国 本 HT 二 
0 TH hs 六 
[eenslst:: 应 月 二 太 人 -Lhtrl 趟 本 亲信) 曙 困 :加 诛 顺 目 (L) El 
口 楼 杨 江 ) | 
口 5 未 记 录 (0， 侨 址 
居 态 : 
图 9-45 【更 新 库 项 目 】 对 话 框 图 9-46 【更 新 页 面 】 对 话 框 


9.4 ”综合 案例 一 一 创建 基于 模板 的 页 面 


模板 制作 完成 后 ， 就 可 以 将 其 应 用 到 网 页 中 。 建 立 站 点 my site， 并 将 资源 文件 中 的 “ 素 
材 \ch10\” 设 置 为 站 点 根 目 录 。 通 过 使 用 模板 ， 能 快速 、 高 效 地 设计 出 风格 一 致 的 网 页 。 
本 实例 的 具体 操作 步骤 如 下 。 
ED 选择 【文件 】 一 【 新 建 】 菜 单 命 令 ， 打 开 【 新 建文 档 】 对 话 框 ， 在 【新 建文 
档 】 对 话 框 中 选择 【网 站 模板 】 选 项 ， 在 【站 点 】 列 表 框 中 选择 【我 的 站 点 】 选 
项 ， 选 择 【 站 点 “我 的 站 点 ”的 模板 】 列 表 框 中 的 模板 文件 “模板 ”， 如 图 9-47 所 示 。 
EGR2y 单 击 【创建 】 按 钮 ， 创 建 一 个 基于 模板 的 网 页 文档 ， 如 图 9-48 所 示 。 


信 180 






























@s 
加 
第 8 
加 < 
= a 章 
日 国生 
ee 人 
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EC 作 
人 请 二 刘 ， 立 此 布局 的 CSS 共有 大 量 福 么 ,如 时 你 的 大 部 分 工 网 
作者 在 设计 视 芭 中 议 行 ， 清 人 浏览 一 下 代码 ， 菊 取 有 关 加 条 
使 用 入 布局 CSS 的 提示 全 可 以 半 利 了 这 些许 酸 ， 然 后记 | 
_ 动 和 的 站 点 。 要 了 解 有 关 这 笃 CSS 市 同 中 使 用 的 方法 的 更 多 
Pd 信息 ,请 阅读 Adobe 开发 人 员 中 心 上 的 以 下 文章 
+ http://www.adobe.com/go/adc css layouts, 使 
| 清除 方法 最 
| PR aaani Ew | EY 板 
和 
图 9-47 【新 建文 档 】 对 话 框 图 9-48 创建 基于 模板 的 网 页 区 


EEJS 将 光标 放置 在 可 编辑 区 域 中 ， 选 择 【 插 入 】 一 【表格 】 菜 单 命令 ， 弹 出 【 表 
格 】 对 话 框 ， 将 【 行 数 】 和 【 列 】 都 设置 为 1， 【表格 宽度 】 设 置 为 95%，【 边 框 
粗细 】 设 置 为 0，【 单 元 格 边 距 】 和 【单元 格 间 距 】 均 设置 为 0， 如 图 9-49 所 示 。 


YY 单 击 【 确 定 】 按 钮 插入 表格 。 在 【属性 】 面 板 中 ， 将 【对 齐 】 设 置 为 【居中 对 NN 
齐 】， 如 图 9-50 所 示 。 





GG 




















策 注 意 ， 这 此 布局 的 CSS 区 有 大 全 往 稀 。 如 生 你 的 大 部 分 工 
作 部 在 设计 视 四 中 证 行 ， 请 快 过 站 一 下 必 49， 基 到 有 关 如 何 





省 除 这些 注释， 类 后 局 











Cl CJ 上 辆 
图 9-49 【表格 】 对 话 框 图 9-50 插入 表格 
ECDp 将 光标 放置 在 表格 中 ， 输 入 文字 和 图 像 ， 并 设置 文字 和 图 像 的 对 齐 方式 ， 如 
图 9-51 所 示 。 


EECDD 选择 【文件 】 一 【保存 】 菜 单 命 令 ， 打 开 【 另 存 为 】 对 话 框 ， 在 【文件 名 】 下 
拉 列 表 框 中 输入 “基于 模板 的 网 页 .html”， 单 击 【保存 】 按 钮 ， 如 图 9-52 所 示 。 
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图 9-51 添加 文字 和 图 像 图 9-52 【另存 为 】 对 话 框 
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EDDD 按 F12 键 在 正 浏览 器 中 预览 效果 ， 如 图 9-53 所 示 。 
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9-53 ”预览 网 页 效果 


9.5 疑难 解 惑 


疑问 1: 为 什么 我 的 模板 不 可 编辑 ? 


答 ; 为 了 避免 编辑 时 误 操作 而 导致 模板 中 的 元 素 发 生变 化 ， 模 板 中 的 内 容 才 默认 为 不 可 
编辑 状态 。 只 有 把 某 个 区 域 或 者 某 段 文本 设置 为 可 编辑 状态 之 后 ， 才 可 以 在 由 该 模板 创建 的 
文档 中 改变 这 个 区 域 。 具 体操 作 步骤 如 下 。 
ED 先 用 鼠标 选取 需要 编辑 的 某 个 区 域 ， 然 后 选择 【修改 】 一 【模板 】- 一 【 令 属 性 
可 编辑 】 菜 单 命令 ， 如 图 9-54 所 示 。 
EU29 在 弹出 的 对 话 框 中 选中 【 令 属 性 可 编辑 】 复 选 框 ， 单 击 【确定 】 按 钮 ， 如 图 9-55 
所 示 。 








[EW exo ER 





可 编 强 标 竺 履 性 x 


过 择 此 DV 相关 89 寺 些 属 和 应 是 可 编辑 的 [mm 
属性 : |CLASS 国医 志 两 

















帮助 




















图 9-54 选择 【 令 属 性 可 编辑 】 命 令 9-55 【可 编辑 标签 属性 】 对 话 框 


疑问 2: 使 用 模板 可 以 为 网 站 的 更 新 和 维护 提供 极 大 的 方便 ， 那 么 在 制作 网 页 时 ， 模 板 
可 以 相互 庶 套 吗 ? 


答 ， 嵌 套 模 板 是 基于 另 一 个 模板 创建 的 模板 ， 在 一 个 站 点 中 ， 对 于 共享 设计 元 素 很 多 而 
变化 不 多 的 网 页 ， 采 用 嵌 套 模板 进行 设计 有 利于 页 面 内 容 的 控制 、 更 新 和 维护 ， 因 此 模板 是 
可 以 相互 嵌 套 的 。 
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第 10 章 
读 懂 样 式 表 密码 一 
使 用 CSS 层 要 
样式 表 


使 用 CSS 技术 可 以 对 文档 进行 精细 的 页 面 美 化 。CSS 样式 不 仅 可 以 对 单个 页 
面 进行 格式 化 ， 还 可 以 对 多 个 页 面 使 用 相同 的 样式 进行 修饰 ， 以 达到 统一 的 效果 。 
本 章 就 来 介绍 如 何 使 用 CSS 层 司 样式 表 美 化 网 页 。 


Dreamweaver CC 动态 网 站 开发 
案例 课堂 (第 2 版 ) 风 一 


10.1 初 识 CSS 样式 表 


CSS 是 一 种 重要 的 网 页 设计 语言 ， 其 作用 是 定义 各 种 网 页 标签 的 样式 属性 ， 从 而 丰富 网 
页 的 表现 力 。 此 外 ， 使 用 层 合 样式 表 ， 可 以 让 样式 和 代码 分 离开 来 ， 让 整个 网 页 代码 更 
清晰 。 


10.1.1 CSS 概述 


CSS(Cascading Style Sheet， 层 车 样式 表 ) 也 可 以 称 为 CSS 样式 表 或 样式 表 ， 其 文件 扩展 名 
为 .css。CSS 是 用 于 增强 或 控制 网 页 样式 ， 并 允许 将 样式 信息 与 网 页 内 容 分 离 的 一 种 标记 性 
语 





Tr 


引用 样式 表 的 目的 是 将 “网 页 结构 代码 ”和 “网 页 样式 风格 代码 ”分 离 ， 从 而 使 网 页 设 
计 者 可 以 对 网 页 布局 进行 更 多 的 控制 。 利 用 样式 表 ， 可 以 将 整个 站 点 上 的 所 有 网 页 都 指向 某 
个 CSS 文件 ， 设 计 者 只 需要 修改 CSS 文件 中 的 某 一 行 ， 整 个 网 页 上 对 应 的 样式 都 会 随 之 发 生 
同步 改变 。 10-1 所 示 为 Dreamweaver CC 的 代码 窗口 ， 在 其 中 可 以 查看 相应 的 CSS 代码 。 


动 cvsers\aiangu\Documents\ 汪 RB\css\css\common css -Ox 





~ 
blockquote:before, blockquote:after, q:before, q:after 


content:""; 





} 
blockquot: 
quotes:"™ mi 


html, body { 
height:101%; 
} 
body { 
background: #fff; 
height:100%; 
padding:8; 
vertical-align: top; 
} v 














图 10-1 Dreamweaver CC 的 代码 窗口 


10.1.2 CSS 的 3 种 类 型 
CSS 的 定义 类 型 主要 有 3 种 ， 分 别 是 自 定义 的 CSS、 重 定义 标签 的 CSS 和 伪 类 及 伪 对 象 。 
1. 自 定义 的 CSS 


自 定义 的 CSS 就 是 根据 需要 自行 定义 的 样式 名 称 ， 图 10-2 所 示 的 #facebox 样式 就 是 自 定 
义 的 CSS 样式 。 


2. 重 定义 标签 的 CSS 
重 定义 标签 样式 即 对 现 有 的 HTML 标签 样式 进行 重 定义 ， 图 10-3 所 示 为 重 定义 的 <ul> 标 
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图 10-2 自 定义 的 CSS 10-3” 重 定义 标签 的 CSS 











3. 伪 类 及 伪 对 象 


CSS 中 有 一 些 比 较 特殊 的 属性 ， 称 为 伪 类 ， 常 见 的 伪 类 有 :link、:hover、 :first- 
child、:active、:focus 等 。 图 10-4 所 示 为 CSS 中 的 伪 类 对 象 。 


动 cwsers\qangu\Documents eess\css\common css -Ox 
1224 加 

* html .clearfix { 

height:1% 








clearfix { 
display:block 























图 10-4 伪 类 及 伪 类 对 象 


10.1.3 ”CSS 的 语法 格式 


CSS 样式 表 由 若干 条 样式 规则 组 成 。 这 些 样式 规则 可 以 应 用 到 不 同 的 元 素 或 文档 ， 从 而 
定义 它们 显示 的 外 观 。 每 一 条 CSS 规则 由 3 个 部 分 构成 ， 即 选择 符 (selector)、 属 性 (property) 
和 属性 值 (value)。 其 语法 基本 格式 如 下 。 


selector{property: value} 


@ selector 选择 符 : 采用 多 种 形式 ， 可 以 为 文档 中 的 HTML 标记 ， 如 <body>、 
<table>、<p> 等 ， 但 是 也 可 以 是 XML 文档 中 的 标记 。 

@ ”property 属性 : 是 选择 符 指定 的 标记 所 包含 的 属性 。 

@ value: 指定 了 属性 的 值 。 

如 果 定 义 选 择 符 的 多 个 属性 ， 则 属性 和 属性 值 为 一 组 ， 组 与 组 之 间 用 分 号 G) 隔 开 。 其 基 
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本 格式 如 下 : 


selector{propertyl: valuel; property2: value2;.. } 


下 面 就 给 出 一 条 CSS 样式 规则 : 


p{color:red} 


该 CSS 样式 规则 中 的 选择 符 p 为 段落 标记 <p> 提 供 样式 ，color 为 指定 文字 颜色 属性 ; red 
为 属性 值 。 此 样式 表示 标记 <p> 指 定 的 段落 文字 为 红色 。 
如 果 要 为 段落 设置 多 种 样式 ， 则 可 以 使 用 下 列 语句 : 


p{font-family:" 素 书 "; color:red; font-size:40px; font-weight:bold} 


10.1.4 ”案例 1 一 一 使 用 Dreamweaver 编写 CSS 


随 着 Web 的 发 展 ， 越 来 越 多 的 开发 人 员 开始 使 用 功能 更 多 、 界 面 更 友好 的 专用 CSS 编辑 
器 ， 如 Dreamweaver 的 CSS 编辑 器 和 Visual Studio 的 CSS 编辑 器 ， 这 些 编辑 器 有 语法 着 色 、 
带 输入 提示 甚至 有 自动 创建 CSS 的 功能 ， 因 此 深 受 开发 人 员 喜 爱 。 下 面 介绍 使 用 
Dreamweaver CC 编写 CSS 样式 规则 。 

具体 的 操作 步骤 如 下 。 

ED 使 用 Dreamweaver CC 创建 HTML 文档 ， 然 后 输入 内 容 ， 如 图 10-5 所 示 。 

EEIR2 在 【CSS 设计 器 】 面 板 中 单 击 【添加 CCS 源 】 按 钮 ， 在 弹出 的 下 拉 菜 单 中 选择 

【在 页 面 中 定义 】 命 令 ， 如 图 10-6 所 示 。 


面 urined -Ox 


渭城 朝 击 泡 径 尘 ， 客 售 青 青 检 色 新 . 劝 寻 更 旦 一 杯 酒 ， 西 出 阳 
闫 无 故人 。 








漠 六 和 中" 活 各 疡 和 CS5 


hea 网 | 451 : 253- | 
图 10-5 ”新 建 网 页 文档 图 10-6 【CSS 设计 器 】 面 板 


EECRS9 在 页 面 中 选择 需要 设置 样式 的 对 象 ， 这 里 选择 添加 的 文本 内 容 ， 然 后 在 【 源 】 
栏 中 选择 <style> 选 项 ， 单 击 【 选 择 器 】 栏 中 的 【添加 选择 器 】 按 钮 ， 即 可 在 选择 器 
中 添加 标签 样式 body， 如 图 10-7 所 示 。 

EEC 在 【属性 】 栏 中 单 击 【 文 本 】 按 钮 ， 设 置 color( 颜 色 ) 为 红色 、font-size( 文 字 大 小 ) 
为 x-large， 如 图 10-8 所 示 。 

EEJe9 在 【属性 】 栏 中 单 击 【 背 景 】 按 钮 ， 设 置 background-color( 背 景 颜色 ) 为 浅黄 
色 ， 如 图 10-9 所 示 。 
































color : 可  #FF0000 
font-family 
font-style : normal 
font-variant 
font-weight 
font-size : xlarge 


图 10-8 设置 文本 属性 


EEDRUD9 切换 到 【代码 】 视 图 中 ， 查 看 添加 的 样式 表 的 具体 内 容 ， 如 图 10-11 所 示 。 


翅 untiued- ST 


10-9 设置 背景 属性 
EECRD) 在 页 面 中 即 可 看 到 添加 样式 后 的 效果 ， 如 图 10-10 所 示 。 











渭城 朝 雨 泄 轻 尘 ， 客 舍 青 青 柳 色 新 。 劝 君 更 尽 一 
杯 酒 ， 西 出 阳 关 无 故人 。 
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10-10 添加 CSS 样式 后 的 效果 


10-11 


【代码 】 视 图 


保存 文件 后 ， 按 F12 键 查看 预览 效果 ， 如 图 10-12 所 示 。 


Se 上 述 使 用 Dreamweaver CC 设置 CSS， 只 是 其 中 一 种 方法 。 读 者 还 可 以 直接 


”在 代码 模式 中 编写 CSS 代码 ， 此 时 会 有 很 好 的 语法 提示 。 
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习 | 国 MAIYE2z01706 王 外 吕 - © a >- 
文件 朋 。 篇 吉日。 查看 (V) 收 大 夫 (A) 工具 (1 帮 动 H) 
渭城 朝 雨 泄 轻 尘 ， 客 舍 青 青 柳 色 新 。 
劝 君 更 尽 一 杯 酒 ， 西 出 阳 关 无 故人 。 

















10-12 预览 文件 效果 


10.2 CSS 的 使 用 方式 


CSS 样式 表 能 很 好 地 控制 页 面 显示 ， 以 达到 分 离 网 页 内 容 和 样式 代码 的 目的 。CSS 样式 
表 控制 HTML5 页 面 达到 好 的 样式 效果 ， 其 使 用 方式 通常 包括 行内 样式 、 内 媒 样 式 、 链 接 样 
式 和 导入 样式 。 


10.2.1 案例 2 一 一 行内 样式 


行内 样式 是 所 有 样式 中 比较 简单 、 直 观 的 方法 ， 就 是 直接 把 CSS 代码 添加 到 HTML 的 标 
记 中 ， 即 作为 HTML 标记 的 属性 存在 。 通 过 这 种 方法 ， 可 以 简单 地 对 某 个 元 素 单独 定义 
样式 。 

使 用 行内 样式 的 方法 是 直接 在 HTML 标记 中 使 用 style 属性 ， 该 属性 的 内 容 就 是 CSS 的 
属性 和 值 ， 例 如 : 


<p style="color:red"> 段 落 样式 </p> 


在 Dreamweaver CC 中 ， 使 用 行内 样式 的 操作 步骤 如 下 。 
EEIDp 新 建 “行内 样式 html” 文 要 ， 在 【代码 】 视 图 中 ， 输 入 图 10-13 所 示 的 内 容 。 




















10-13 ”设置 行内 样式 


国 于 BY 保存 文件 后 ， 按 F12 键 查看 预览 效果 ， 如 图 10-14 所 示 ， 可 以 看 到 两 个 p 标记 
中 都 使 用 了 style 属性 ， 并 且 设 置 了 CSS 样式 ， 各 个 样式 之 间 互 不 影响 ， 分 别 显 示 自 


己 的 样式 效果 。 第 1 个 段落 设置 红色 字体 ， 居 中 显示 ， 带 有 下 画 线 。 第 二 个 段落 为 
蓝 色 字体 ， 以 斜体 显示 。 


- oO x 
司 ) 辐 CAUsers\qiangu\Dor 只 - 0 | Bm 
文件 站 舌 () 喜 硬 V) 收 训 (A) 工具 (]。 帮助 中 


此 段落 使 用 行内 样式 修饰 
正义 用 窑 








10-14 ”行内 样式 效果 


尽管 行内 样式 简单 ， 但 这 种 方法 不 常 使 用 ， 因 为 这 样 添加 无 法 完全 发 挥 样式 表 “ 内容 结 
构 和 样式 控制 代码 ”分 离 的 优势 。 而 且 这 种 方式 也 不 利于 样式 的 重用 。 如 果 需 要 为 每 一 个 标 
记 都 设置 style 属性 ， 则 后 期 维护 成 本 高 ， 网 页 容易 过 胖 ， 故 不 推荐 使 用 。 


10.2.2 ”案例 3 一 一 内 骨 样 式 


内 桥 样 式 就 是 将 CSS 样式 代码 添加 到 <head> 与 </head> 之 间 ， 并 且 用 <style> 和 </style> 标 
记 进行 声明 。 这 种 写法 虽然 没有 实现 页 面 内 容 和 样式 控制 代码 完全 分 离 ， 但 可 以 设置 一 些 比 
较 简 单 的 样式 ， 并 统一 页 面 样式 。 

其 格式 如 下 : 


<head> 
<style type="text/css" > 
p 
{ 
color:red; 
font-size:12px; 
} 
</style> 
</head> 


有 些 较 低 版 本 的 浏览 器 不 能 识别 <style> 标 记 ， 因 而 不 能 正确 地 将 样式 应 用 到 页 面 显示 
上 ， 而 是 直接 将 标记 中 的 内 容 以 文本 的 形式 显示 。 为 了 解决 此 类 问题 ， 可 以 使 用 HMITL 注释 
将 标记 中 的 内 容 隐藏 。 如 果 浏 览 器 能 够 识别 <style> 标 记 ， 则 标记 内 被 注释 的 CSS 样式 定义 代 
码 依 旧 能 够 发 挥 作用 。 


<head> 
<style type="text/css" > 
<!-- 
p 
{ 
color:red; 
font-size:12px; 
} 
--> 
</style> 
</head> 
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在 Dreamweaver CC 中 ， 使 用 内 嵌 样 式 的 操作 步骤 如 下 。 

国 于 DD 新建 “内 嵌 样 式 .html” 文 档 ， 在 【代码 】 视 图 中 ， 输 入 图 10-15 所 示 的 内 容 。 

EC 保存 文件 后 ， 按 F12 键 查看 预览 效果 ， 如 图 10-16 所 示 ， 可 以 看 到 两 个 p 标记 
中 都 被 CSS 样式 修饰 ， 其 样式 保持 一 致 ， 段 落 居 中 、 加 粗 并 以 橙色 字体 显示 。 


加 chusers\ianouVpocumentsVEr html EE 














三 本 居 
司 CAUsers\qiangu\Doc PD - 0 | 居 RR x| 
文件 (F) 六 袁 (E) ”可 看 (V) ”收藏 赤 (A) 工具 (T) 帮助 (H) 


此 段落 使 用 内 霸 样 式 修饰 


EFIETETEYS 

















正文 内 容 




















图 10-15 内 榜样 式 图 10-16 ”内 幅 样 式 效果 


在 上 面 的 例子 中 ， 所 有 CSS 编码 都 在 style 标记 中 ， 方便 了 后 期 维护 ， 页 面 与 行内 样式 相 
比 大 大 瘦身 了 。 但 如 果 一 个 网 站 拥有 很 多 页 面 ， 对 于 不 同 页 面 p 标记 都 希望 采用 同样 风格 
时 ， 内 购 方式 就 显示 有 点 麻烦 。 此 种 方法 只 适用 于 特殊 页 面 设置 单独 的 样式 风格 。 


10.2.3 ”案例 4 一 一 链接 样式 


链接 样式 是 CSS 中 使 用 频率 最 高 、 最 实用 的 方法 。 它 很 好 地 将 “页 面 内 容 ” 和 “样式 风 
格 代码 ”分 离 成 两 个 文件 或 多 个 文件 ， 实 现 了 页 面 框架 HTML 代码 和 CSS 代码 的 完全 分 离 。 
使 前 期 制作 和 后 期 维护 都 十 分 方便 。 同 一 个 CSS 文件 ， 根 据 需要 可 以 链接 到 网 站 中 所 有 的 
HTML 页 面 上 ， 使 得 网 站 整体 风格 统一 、 协 调 ， 并 且 后 期 维护 的 工作 量 也 大 大 减少 。 

链接 样式 是 指 在 外 部 定义 CSS 样式 表 并 形成 以 .css 为 扩展 名 的 文件 ， 然 后 在 页 面 中 通过 
<link> 链 接 标记 链接 到 页 面 中 ， 而 且 该 链接 语句 必须 放 在 页 面 的 <head> 标 记 区 ， 代 码 如 下 : 


<link rel="stylesheet" type="text/css" href="1.css"”/> 


(1) rel 指定 链接 到 样式 表 ， 其 值 为 stylesheet。 

(2) type 表示 样式 表 类 型 为 CSS 样式 表 。 

(3) href 指定 了 CSS 样式 表 所 在 位 置 ， 此 处 表示 当前 路 径 下 名 称 为 1.css 的 文件 。 

这 里 使 用 的 是 相对 路 径 。 如 果 HTML 文档 与 CSS 样式 表 没 有 在 同一 路 径 下 ， 则 需要 指定 

样式 表 的 绝对 路 径 或 引用 位 置 。 

在 Dreamweaver CC 中 ， 使 用 链接 样式 的 操作 步骤 如 下 。 

EC 新 建 “ 链 接 样式 html” 文 要 ， 在 【代码 】 视 图 中 输入 图 10-17 所 示 的 内 容 。 

EECDUPp 选择 【文件 】 一 【新 建 】 菜 单 命 令 ， 打 开 【 新 建文 件 】 对 话 框 ， 选 择 【 空 白 
页 】 选 项 ， 在 【页 面 类 型 】 列 表 框 中 选择 CSS 选项 ， 单 击 【 创 建 】 按 钮 ， 如 图 10-18 
所 示 。 
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问 :四 

Rd 4 ve 二 se 

<P> 此 陆 芝 乱用 入 榜样 式 你 饥 </p> 可 大 

/boy 

加 hent> 

加 

司 

ss maser CE ay 
10-17 ”链接 样式 10-18 【新 建文 件 】 对 话 框 


EEC 创建 名 称 为 1.css 的 样式 表 文 件 ， 输 入 的 内 容 如 图 10-19 所 示 。 
EC 保存 文件 后 ， 按 F12 键 查看 预览 效果 ， 如 图 10-20 所 示 ， 可 以 看 到 标题 和 段落 
以 不 同样 式 显示 ， 标 题 居 中 显示 ， 段 落 以 斜体 居中 显示 。 


























夯 cvuseroqiangwwpocument 有 REV cs -Ox -0o x 
ptfonc methts 2o0x cixt-alignicentors | | ceerasiorg tor D ~ © | 全 te *| 
font-style:1taltc;} 六 们 (久久 ( 明 。 吾 看 (VY) 家 交 (A) 工具 (部 且 (H) 

CSS 学 习 
此 民 彰化 万 好 菩 桩 式 纤 纺 
图 10-19 样式 表 内 容 图 10-20 ”链接 样式 效果 


链接 样式 的 最 大 优势 就 是 将 CSS 代码 和 HTML 代码 完全 分 离 ， 并 且 同 一 个 CSS 文件 能 
被 不 同 的 HTML 所 链接 使 用 。 


Se 在 设计 整个 网 站 时 ， 可 以 将 所 有 页 面 链接 到 同一 个 CSS 文件 ， 使 用 相同 的 样 
 。 式 风格 。 如 果 整 个 网 站 需要 修改 样式 ， 只 需 修 改 CSS 文件 即 可 。 


10.2.4 案例 5 一 一 导入 样式 


导入 样式 和 链接 样式 基本 相同 ， 都 是 创建 一 个 单独 CSS 文件 ， 然 后 再 引入 到 HTML 文件 
中 。 只 不 过 语法 和 运作 方式 有 所 差别 。 采 用 导入 样式 的 样式 表 ， 在 HTML 文件 初始 化 时 ， 会 
被 导入 到 HTML 文件 内 ， 作 为 文件 的 一 部 分 ， 类 似 于 内 内 效果 。 而 链接 样式 是 在 HTML 标记 
需要 样式 风格 时 才 以 链接 方式 引入 。 

导入 外 部 样式 表 是 指 在 内 部 样式 表 的 <style> 标 记 中 ， 使 用 @import 导入 一 个 外 部 样式 
表 ， 例 如 : 


<head> 
<style type="text/css" > 
0 
Q@import "1.css" 
--> </style> 
</head> 
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导入 外 部 样式 表 相 当 于 将 样式 表 导 入 到 内 部 样式 表 中 ， 这 一 方式 更 有 优势 。 导 入 外 部 样 
式 表 必 须 在 样式 表 的 开始 部 分 、 其 他 内 部 样式 表 上 面 。 
创建 名 称 为 2.css 的 样式 表 文 件 ， 输 入 的 内 容 如 下 : 


hl{text-align:center;color:#0000ff} 
p{font-weight:bolder;text-decoration:underline;font-size:20px;} 


在 Dreamweaver CC 中 ， 使 用 导入 样式 的 操作 步骤 如 下 。 

EEJDp 新 建 “ 导 入 样式 html” 文 档 ， 在 【代码 】 视 图 中 ， 输 入 图 10-21 所 示 的 内 容 。 

EEJ2y 保存 文件 后 ， 按 F12 键 查看 预览 效果 ， 如 图 10-22 所 示 ， 可 以 看 到 标题 和 段落 
以 不 同样 式 显示 ， 标 题 居 中 显示 ， 颜 色 为 蓝 色 ， 段 落 以 大 小 20 像素 并 加 粗 显示 。 


函 cusersaianou\Documents\ 酝 KR 导入 占 式 html -Ox 











- 0O x 
站 CAUsers\qiangu\Doc PD” 0 夸 导入 样式 
文件 (有 ] ”编辑 (E) ” 间 看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 


















Ss CSS 学 习 
<p> 此 诺 冰 使 用 导入 样式 修饰 </p> 
3 | 。 | 此 有 阔 合 用 导入 样式 修 作 
图 10-21 导入 样式 图 10-22 ”导入 样式 显示 效果 
导入 样式 与 链接 样式 比较 ， 其 最 大 的 优点 就 是 可 以 一 次 导入 多 个 CSS 文件 ， 其 格式 如 下 


<style> 

@import "2.css" 
Qimport "test.css" 
</style> 


10.3 ”CSS 中 的 常用 样式 


在 了 解 了 CSS 的 使 用 方式 与 编写 CSS 样式 规则 的 方法 后 ， 下 面 介绍 如 何 定义 CSS 样式 
中 常用 的 样式 属性 ， 包 括 人 字体、 文本、 背景、 边框、 列表 等 。 


10.3.1 案例 6 一 一 使 用 字体 样式 
在 HIML 中 ，CSS 字体 属性 用 于 定义 文字 的 字体 、 大 小 、 粗 细 的 表现 等 。 常 用 的 字体 属 


性 包括 字体 类 型 、 字 号 大 小 、 字 体 风 格 、 字 体 颜色 等 。 
1. 控制 字体 类 型 


font-family 属性 用 于 指定 文字 字体 类 型 ， 如 宋体 、 黑 体 、 隶 书 、Times New Roman 等 ， 
即 在 网 页 中 展示 字体 不 同 的 形状 。 有 具体 的 语法 格式 如 下 : 


{font-family : name} 


其 中 ，name 是 字体 名 称 ， 按 优先 顺序 排列 ， 以 逗号 隔 开 ， 如 果 字 体 名 称 包 含 空格 ， 则 应 
使 用 引号 括 起 。 
新 建 空白 网 页 文档 ， 在 【代码 】 视 图 中 ， 输 入 以 下 内 容 ， 如 图 10-23 所 示 。 


<!DOCTYPE html> 
<html> 

<style type=text/css> 
p{font-family: 黑 体 } 


</style> 
<body> 使 
<p align=center> 天 行 健 君子 应 自强 不 息 。</p> 用 
</body> O 
</html> 2 
保存 网 页 文档 为 font-familyhtml， 在 正 11.0 浏览 器 中 的 浏览 效果 如 图 10-24 所 示 ， 可 以 必 
看 到 文字 居中 并 以 黑体 显示 。 全 
ET -ox 表 


裔 虹 久 闭 裤 陪 注 ” 山 01 由 














<1DOCTYPE htnt> 9 
<htnl> 
<style type=text/css> 





- 0O x 
@ 国 CUsers\administrat PD ~ &  @ CA\Users\administra... x 
文件 (月 ”入 强 (E) ”查看 (V) ”收藏 只 (A) 工具 (T) 孝 助 (H) 


天 行 健 ， 君 子 应 自强 不 息 。 





<p align=center> 天 行 健 , 寻 子 应 自强 不 息 。</p> 
</body> 




















图 10-23 ”代码 窗口 10-24 “字体 显示 


2. 定义 字体 大 小 
在 CSS 规定 中 ， 通 常 使 用 font-size 设置 文字 大 小 。 其 语法 格式 如 下 : 


{Eont= 


size : 数值 | inherit | xx-small | x-small | small | medium | large | 


x-large | xx-large | larger | smaller | length} 


其 中 ， 通 过 数值 来 定义 字体 大 小 ， 如 用 font-size:10px 的 方式 定义 字体 大 小 为 12 像素 。 
此 外 ， 还 可 以 通过 medium 之 类 的 参数 定义 字体 的 大 小 ， 其 参数 含义 如 表 10-1 所 示 。 


表 10-1 font-size 参数 列表 

















参 数 说 明 
xx-small “| 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 最 小 

x-small 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 较 小 

small 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 小 
medium 默认 值 。 绝 对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 正 常 
large 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 大 
x-large 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 较 大 








xx-large 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 最 大 
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续 表 


参 数 说 明 
larger 相对 字体 尺寸 。 相 对 于 父 对 象 中 字体 尺寸 进行 相对 增 大 。 使 用 成 比例 的 em 单位 计算 


smaller | 相对 字体 尺寸 。 相 对 于 父 对 象 中 字体 尺寸 进行 相对 减 小 。 使 用 成 比例 的 em 单位 计算 








length 百分数 或 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 为 负 值 。 其 百分比 取 值 是 基于 父 
对 象 中 字体 的 尺寸 





新 建 空白 网 页 文档 ， 在 【代码 】 视 图 中 ， 输 入 以 下 内 容 ， 如 图 10-25 所 示 。 


<!DOCTYPE html> 
<html> 
<body> 
<div style="font-size:10pt"> 霜 叶 红 于 二 月 花 
<p style="font-size:smal1"> 霜 叶 红 于 二 月 花 </p> 
<p style="font-size:larger"> 箱 叶 红 于 二 月 花 </p> 
<p style="font-size:x-small"> 霜 叶 红 于 二 月 花 </p> 
<p style="font-size:x-1larger"> 霜 叶 红 于 二 月 花 </p> 
<p style="font-size:50%"> 箱 叶 红 于 二 月 花 </p> 
<p style="font-size:25pt"> 霜 叶 红 于 二 月 花 </p> 
</div> 
</body> 
</html> 


保存 网 页 文档 为 font-size.html， 在 IE 11.0 浏览 器 中 的 浏览 效果 如 图 10-26 所 示 ， 可 以 看 
到 网 页 中 文字 被 设置 成 不 同 的 大 小 ， 其 设置 方式 采用 了 绝对 数值 、 关 键 字 和 百分比 等 形式 。 












































ET -Ox - oO x 
加 <1DOCTYPE hm ”| 司 CNusersvqiangu\Doc PD - 0 | @ cAUsers\qiangu\Do| 
er 文件 (总 名 (EF) 查看 (V) 收藏 交 (A) 工具 (T) 帮助 (H) 
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pe 霸 叶 红 于 二 月 花 
从 <p style: 国生 
全 serone- ste 25p eR IF Pik yp ot 
</dlv: 霜 叶 红 于 二 月 花 
/body 
四 /htmt 
回 
因 霜 叶 红 于 二 月 花 ] 
bn p 空 二 
图 10-25 ”代码 窗口 10-26 ”字体 大 小 显示 


3. 定义 字体 风格 
font-style 通常 用 来 定义 字体 风格 ， 即 字体 的 显示 样式 ， 语 法 格式 如 下 : 


font-style : normal | italic | oblique |inherit 


其 属性 值 有 4 个 ， 具 体 含义 如 表 10-2 所 示 。 


SE 


让 


表 10-2 font-style 参数 表 








属性 值 含 义 

本 默认 值 。 浏 览 器 显示 一 个 标准 的 字体 样式 

italic | 浏览 器 会 显示 一 个 斜体 的 字体 样式 

btud 将 没有 斜体 变量 的 特殊 字体 ， 浏 览 器 会 显示 一 个 倾斜 的 字体 样式 
ieiit 规定 应 该 从 父 元 素 继承 字体 样式 


新 建 空白 网 页 文档 ， 在 【代码 】 视 图 中 ， 输 入 以 下 内 容 ， 如 图 10-27 所 示 。 


<!DOCTYPE html> 

<html> 

<body> 
<p style="font-style:italic"> 梅 花香 自 苦寒 来 </p> 
<p style="font-style:normal"> 梅 花香 自 苦 寒 来 </p> 
<p style="font-style:oblique"> 梅 花香 自 苦 寒 来 </p> 

</body> 

</html> 


保存 网 页 文档 为 font-style.html， 在 正 11.0 浏览 器 中 的 浏览 效果 如 图 10-28 所 示 ， 可 以 看 
到 文字 分 别 显示 不 同 的 样式 ， 如 斜体 。 
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图 10-27 ”代码 窗口 国 介 全 > 


4. 定义 文字 的 颜色 


在 CSS 样式 中 ， 通 常 使 用 color 属性 来 设置 颜色 ， 其 属性 值 通 常 使 用 表 10-3 所 示 的 方式 
设 定 。 
表 10-3 color 属性 值 


属性 值 说 明 
color name 。 | 规定 颜色 值 为 颜色 名 称 的 颜色 (如 red 
hex_number 规定 颜色 值 为 十 六 进 制 值 的 颜色 (如 #ff0000) 
rgb number 规定 颜色 值 为 rgb 代码 的 颜色 (如 rgb(255.0.0)) 
inherit 规定 应 该 从 父 元 素 继承 颜色 
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续 表 
属性 值 说 明 


hsl number | 规定 颜色 值 为 HSL 代码 的 颜色 (如 hsl(0,75%,50%))， 此 为 CSS3 新 增加 的 颜色 表现 











方式 

hsla_number | 规定 颜色 值 为 HSLA 代码 的 颜色 (如 hsla(120.50%.50%.1))， 此 为 CSS3 新 增加 的 颜色 
表现 方式 

rgba_number “| 规定 颜色 值 为 RGBA 代码 的 颜色 (如 rgba(125,10.45,0.5))， 此 为 CSS3 新 增加 的 颜色 
表现 方式 


新 建 空白 网 页 文档 ， 在 【代码 】 视 图 中 ， 输 入 以 下 内 容 ， 如 图 10-29 所 示 。 


<!DOCTYPE html> 

<html> 

<head> 

<style type="text/css"> 

body {color:red} 

hl {color:#00ff00} 

p-.ex {color:rgb(0,0,255)} 

p.hs{color:hsl (0,75%,50%)} 

p-.ha{color:hsla(120,50%,50%,1)} 

p-.ra{color:rgba(125,10,45,0.5)} 

</style> 

</head> 

<body> 

<h1>《 青 玉 案 元 夕 》 </h1> 

<p> 众 里 寻 他 千百度 ， 暮 然 回 首 ， 那 人 却 在 灯火 阑珊 处 。 

</p> 

<p class="ex"> 众 里 寻 他 千百度 ， ya 要 人 全 2 了 洲 如 (该 段落 定义 了 
class="ex"。 该 段落 中 的 文本 是 蓝 色 

<p class="hs"> 众 里 寻 他 千百度 ， EE 二 那 人 却 在 灯火 表现 处 。 (此 处 使 用 了 css3 中 的 新 增加 
的 HSL 函数 ， 构 建 颜色 。) </p> 

<p class="ha"> 众 里 寻 他 千百度 ， 暮 然 回首 ， 那 人 却 在 灯火 阑珊 处 。 (此 处 使 用 了 css3 中 的 新 增加 
的 HSLA 函数 ， 构 建 颜色 。) </p> 

<p class="ra"> 众 里 寻 他 千百度 ， 暮 然 回首 ， 那 人 却 在 灯火 阑珊 处 。 (此 处 使 用 了 css3 中 的 新 增加 
的 RGBA 函数 ， 构 建 颜色 。) </p> 

</body> 

</html> 


保存 网 页 文档 为 colorhtml， 在 正 11.0 浏览 器 中 的 浏览 效果 如 图 10-30 所 示 ， 可 以 看 到 文 
字 以 不 同 颜色 显示 ， 并 采用 了 不 同 的 颜色 取 值 方式 。 
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10-29 ”代码 窗口 10-30 ”字体 颜色 属性 显示 


全 1 


10.3.2 ”案例 7 一 一 使 用 文本 样式 


在 网 页 中 ， 段 落 的 放置 与 效果 的 显示 会 直接 影响 到 页 面 的 布局 及 风格 ，CSS 样式 表 提 供 
了 文本 属性 来 实现 对 页 面 中 段落 文本 的 控制 。 


1. 设置 文本 的 缩 进 效果 


CSS 中 的 text-indent 属性 用 于 设置 文本 的 首 行 缩 进 ， 其 默认 值 为 0， 当 属性 值 为 负 值 时 ， 
表示 首 行 会 被 缩 进 到 左边 ， 其 语法 格式 如 下 : 
text-indent : length 


其 中 ，length 属性 值 表示 有 百分比 数字 或 有 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 
为 负 值 。 
新 建 空白 网 页 文档 ， 在 【代码 】 视 图 中 ， 输 入 以 下 内 容 ， 如 图 10-31 所 示 。 


<!DOCTYPE html> 

<html> 

<body> 

<p style="text-indent:10mm"> 

此 处 直接 定义 长 度 ， 直 接 缩 进 。 

</p> 

<p style="text-indent:10%"> 
此 处 使 用 百分比 ， 进 行 缩 进 。 

</p> 

</body> 

</html> 


保存 网 页 文档 为 text-indent.html， 在 正 11.0 浏览 器 中 的 浏览 效果 如 图 10-32 所 示 ， 可 以 
看 到 文字 以 首 行 缩 进 方式 显示 。 
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10-31 ”代码 窗口 10-32 ” 缩 进 显示 窗口 


2. 设置 垂直 对 齐 方式 
vertical-align 属性 用 于 设置 内 容 的 垂直 对 齐 方式 ， 其 默认 值 为 baseline， 表 示 与 基线 对 
齐 ， 其 语法 格式 如 下 : 


{vertical-align: 属 性 值 } 


vertical-align 属性 值 有 9 个 预 设 值 可 供 使 用 ， 也 可 以 使 用 百分比 。 这 9 个 预 设 值 和 百分比 
的 含义 如 表 10-4 所 示 。 
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表 10-4 vertical-align 属性 值 


























属性 值 说 明 
baseline 默认 。 元 素 放置 在 父 元 素 的 基线 上 
sub 垂直 对 齐 文本 的 下 标 
super 垂直 对 齐 文本 的 上 标 
top 把 元 素 的 顶端 与 行 中 最 高 元 素 的 顶端 对 齐 
text-top 把 元 素 的 顶端 与 父 元 素 字体 的 顶端 对 齐 
middle 把 此 元 素 放置 在 父 元 素 的 中 部 
bottom 把 元 素 的 顶端 与 行 中 最 低 的 元 素 的 顶端 对 齐 
text-bottom 把 元 素 的 底 端 与 父 元 素 字体 的 底 端 对 齐 
length 设置 元 素 的 堆 合 顺序 
% 使 用 "line-height" 属性 的 百分比 值 来 排列 此 元 素 。 人 允许 使 用 负 值 


新 建 空白 网 页 文档 ， 在 【代码 】 视 图 中 ， 输 入 以 下 内 容 ， 如 图 10-33 所 示 。 


<!DOCTYPE html> 
<html> 
<body> 
<p> 
世界 杯 <b style=" font-size:8pt;vertical-align:super">2014</b>! 
中 国 队 <b style="font-size: 8pt;vertical-align: sub">[ 注 ]</b>! 
加 油 ! <img src="1.gif" style="vertical-align: baseline"> 
</p> 
<p><img src="2.gif" style="vertical-align:middle"/> 
世界 杯 ! 中 国 队 ! 加 油 ! <img src="1.gif" style="vertical-align:top"> 
</p> 
<hr/> 
<p ><img src="2.gif" style="vertical-align:middle"/> 
世界 杯 ! 中 国 队 ! 加 油 ! <img src="1.gif" style="vertical-align:text-top"> 
</p> 
<p><img src="2.gif" style="vertical-align:middle"/> 
世界 杯 ! 中 国 队 ! 加 油 ! <img src="1.gif" style="vertical-align:bottom"> 
</p> 
<hr/> 
<p ><img src="2.gif" style="vertical-align:middle"/> 
世界 杯 ! 中 国 队 ! 加 油 ! <img src="1.gif" style="vertical-align:text-bottom"> 
</p> 
<p> 
世界 杯 <b style=" font-size:8pt;vertical-align:100%">2008</b>! 
中 国 队 <b style="font-size: 8pt;vertical-align: -100%">[ 注 ] </b>! 
加 油 ! <img src="1.gif" style="vertical-align: baseline"> 
</p> 
</body> 
</html> 


保存 网 页 文档 为 vertical-align.html， 按 F12 键 在 正 11.0 浏览 器 中 的 浏览 效果 如 图 10-34 
所 示 ， 可 以 看 到 文字 在 垂直 方向 上 以 不 同 的 对 齐 方式 显示 。 
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图 10-33 ”代码 窗口 10-34 ”垂直 对 齐 显示 由 
二 起 、 
3. 设置 水 平 对 齐 方式 吉 


text-align 属性 用 于 设置 内 容 的 水 平 对 齐 方式 ， 其 默认 值 为 left( 左 对 齐 )， 其 语法 格式 
如 下 : 


{ text-align: sTextAlign } 
其 属性 值 含义 ， 如 表 10-5 所 示 。 
表 10-5 ”text-align 属性 表 





文本 向 行 的 左边 缘 对 齐 。 在 垂直 方向 的 文本 中 ， 文 本 在 left-to-right 模式 下 向 开始 边缘 对 齐 


文本 向 行 的 右边 缘 对 齐 。 在 垂直 方向 的 文本 中 ， 文 本 在 left-to-right 模式 下 向 结束 边缘 对 齐 
文本 在 行内 居中 对 齐 





的 属性 设置 方法 分 散 对 齐 ， 即 两 端 对 齐 、 均 匀 分 布 
新 建 空白 网 页 文档 ， 在 【代码 】 视 图 中 ， 输 入 以 下 内 容 ， 如 图 10-35 所 示 。 


<!DOCTYPE html> 
<html> 
<body> 
<hl style="text-align:center"> 登 幽 州 台 歌 </h1> 
<h3 style="text-align:left"> 选 自 ， </h3> 
<h3 style="text-align:right"> 
<img src="1.gif" /> 
唐诗 三 百 首 </h3> 
<p style="text-align:justify"> 
前 不 见 古 人 
后 不 见 来 者 
(这 是 一 个 测试 ， 这 是 一 个 测试 ， 这 是 一 个 测试 ，) 
</p> 
</body> 
</html> 


保存 网 页 文档 为 text-align.html， 在 F12 键 在 下 11.0 浏览 器 中 的 浏览 效果 如 图 10-36 所 
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示 ， 可 以 看 到 文字 在 水 平方 向 上 以 不 同 的 对 齐 方式 显示 。 
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图 10-35 ”代码 窗口 10-36 ”对 齐 效果 图 


4. 设置 文本 的 行 高 
在 CSS 中 ，line-height 属性 用 来 设置 行 间距 ， 即 行 高 。 其 语法 格式 如 下 : 


line-height : normal | length 


其 属性 值 的 具体 含义 ， 如 表 10-6 所 示 。 
表 10-6 行 高 属性 值 


默认 行 高 ， 即 网 页 文本 的 标准 行 高 


百分比 数字 或 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 。 其 百分比 取 值 
是 基于 字体 的 高 度 尺寸 





新 建 空白 网 页 文档 ， 在 【代码 】 视 图 中 ， 输 入 以 下 内 容 ， 如 图 10-37 所 示 。 


<!DOCTYPE html> 
<html> 
<body> 
<div style="text-indent:l0mm;"> 
<p style="line-height:50px"> 
世界 杯 (World Cup, FIFA World Cup)， 国 际 足 联 世界 杯 ， 世 界 足球 锦标 赛 ) 是 世界 上 最 
高 水 平 的 足球 比赛 ， 与 奥运 会 、F1 并 称 为 全 球 三 大 顶级 赛事 。 
</p> <p style="line-height:50%"> 
世界 杯 (World Cup, FIFA World Cup)， 国 际 足 联 世界 杯 ， 世 界 足球 锦标 赛 ) 是 世界 上 最 高 
水 平 的 足球 比赛 ， 与 奥运 会 、F1 并 称 为 全 球 三 大 项 级 赛事 。 
</p> 
</div> 
</body> 
</html> 


保存 网 页 文档 为 line-heighthtml， 按 F12 键 在 IE 11.0 浏览 器 中 的 浏览 效果 如 图 10-38 所 
示 ， 可 以 看 到 有 上 段 文字 重 羡 在 一 起 ， 即 行 高 设置 较 小 。 
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图 10-37 ”代码 窗口 10-38” 设 定 文本 行 高 显示 图 


10.3.3 ”案例 8 一 一 使 用 背景 样式 


背景 是 网 页 设计 时 的 重要 因素 之 一 ， 一 个 背景 优美 的 网 页 ， 总 能 吸引 不 少 访问 者 。 使 用 
CSS 的 背景 样式 可 以 设置 网 页 背景 。 


1. 设置 背景 颜色 
background-color 属性 用 于 设 定 网 页 背景 色 ， 其 语法 格式 如 下 : 


{background-color : transparent | color} 


关键 字 transparent 是 个 默认 值 ， 表 示 透 明 。 背 景 颜色 color 设 定 方 法 可 以 采用 英文 单词 、 
十 六 进 制 、RGB、HSL、HSLA 和 GRBA。 
新 建 空白 网 页 文档 ， 在 【代码 】 视 图 中 ， 输 入 以 下 内 容 ， 如 图 10-39 所 示 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 背 景色 设置 </title> 

<head> 

<body style="background-color:PaleGreen; color:Blue"> 
<p> 

background-color 属性 设置 背景 色 ，color 属性 设置 字体 颜色 。 

</p> 

</body> 

</html> 


保存 网 页 文档 为 background-color.html， 按 F12 键 在 IE 11.0 浏览 器 中 的 浏览 效果 ， 如 
图 10-40 所 示 ， 可 以 看 到 网 页 背景 色 显示 浅 绿色 ， 而 字体 颜色 为 蓝 色 。 
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10-39 代码 窗口 10-40 设置 背景 色 
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background-color 除 可 以 设置 整个 网 页 的 背景 颜色 ， 还 可 以 指定 某 个 网 页 元 素 的 背景 色 ， 
如 设置 hl 标题 的 背景 色 、 设 置 段落 p 的 背景 色 。 
新 建 空白 网 页 文档 ， 在 【代码 】 视 图 中 ， 输 入 以 下 内 容 ， 如 图 10-41 所 示 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 背 景色 设置 </title> 

<style> 

mE 
background-color: red; 
color: black; 
text-align:center; 


background-color:gray’; 
color:blue; 
text-indent:2em; 
3 
</style> 
<head> 
<body> 
<h1> 颜 色 设置 </h1> 
<p> 
background-color 属性 设置 背景 色 ，color 属性 设置 字体 颜色 。 
</p> 
</body> 
</html> 


保存 网 页 文档 为 background-color-1.html， 按 F12 键 在 了 11.0 浏览 器 中 的 浏览 效果 ， 如 
图 10-42 所 示 ， 可 以 看 到 网 页 中 标题 区 域 背 景色 为 红色 ， 段 落 区 域 背景 色 为 灰色 ， 并 且 分 别 
为 字体 设置 了 不 同 的 前 景色 。 
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图 10-41 代码 窗口 图 10-42 设置 HTML 元 素 背 景色 


2. 设置 背景 图 片 
background-image 属性 用 于 设 定 标记 的 背景 图 片 ， 通 常情 况 下 ， 在 标记 <body> 中 应 用 ， 
将 图 片 用 于 整个 主体 中 。background-image 语法 格式 如 下 : 


. 
人 G20 


{background-image : none | url (url)} 


其 默认 属性 是 无 背景 图 ， 当 需要 使 用 背景 图 时 可 以 用 URL 进行 导入 ，URL 可 以 使 用 绝对 
路 径 ， 也 可 以 使 用 相对 路 径 。 
新 建 空白 网 页 文档 ， 在 【代码 】 视 图 中 ， 输 入 以 下 内 容 ， 如 图 10-43 所 示 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 背 景色 设置 </title> 
<style> 
body{ 
background-image:url (01.jpg) 
} 
</style> 
<head> 
<body> 
<p> 夕 阳 无 限 好 ， 只 是 近 黄 昏 ! </p> 
</body> 
</html> 


保存 网 页 文档 为 background-image.html， 按 F12 键 在 正 11.0 浏览 器 中 的 浏览 效果 ， 如 
10-44 所 示 ， 可 以 看 到 网 页 中 显示 背景 图 ， 但 如 果 图 片 大 小 小 于 整个 网 页 大 小 时 ， 此 时 图 
片 为 了 填充 网 页 背景 色 ， 会 重复 出 现 并 铺 满 整个 网 页 。 

















| 
图 10-43 ”代码 窗口 图 10-44 设置 背景 图 片 


Se 在 设 定 背 景 图片 时 ， 最 好 同时 也 设 定 背 景色 ， 这 样 当 背景 图 片 因 某 种 原因 无 
汽 法 正常 显示 时 ， 可 以 使 用 背景 色 来 代替 。 当 然 ， 如 果 正 常 显示 ， 背 景 图 片 会 覆盖 
背景 色 的 显示 。 


3. 背景 图 片 重 复 


在 CSS 中 可 以 通过 background-repeat 属性 设置 图 片 的 重复 方式 ， 包 括 水 平 重复 、 垂 直 重 
复 和 不 重复 等 。 各 属性 值 说 明 如 表 10-7 所 示 。 





渡 着 状 辐 而 SSO 开 注 一 一 宜昌 订 财 襟 赔 注 “二 04 浊 和 
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表 10-7 background-repeat 属性 











属性 值 描 述 
repeat 背景 图 片 水 平和 垂直 方向 都 重复 平 铺 
repeat-x 背景 图 片 水 平方 向 重复 平 铺 
Tepeat- 背景 图 片 垂直 方向 重复 平 铺 
no-repeat 背景 图 片 不 重复 平 铺 


页 面 都 被 背景 图 片 覆 盖 。 





AN <!DOCTYPE html> 
、 <html> 
<head> 
<title> 背 景 图 片 重复 </title> 
<style> 
body{ 
background-image:url (01.jpg); 
background-repeat:no-repeat; 
} 
</style> 
<head> 
<body> 
<p> 夕 阳 无 限 好 ， 只 是 近 黄 昏 ! </p> 
</body> 
</html> 


background-repeat 属性 重复 背景 图 片 是 从 元 素 的 左上 和 角 开 始 平 铺 ， 直 到 水 平 、 垂 直 或 全 部 


新 建 空白 网 页 文档 ， 在 【代码 】 视 图 中 ， 输 入 以 下 内 容 ， 如 图 10-45 所 示 。 


在 正 11.0 中 浏览 效果 如 图 10-46 所 示 ， 可 以 看 到 网 页 中 显示 背景 图 片 ， 但 图 片 以 默认 大 
小 显示 ， 而 没有 对 整个 网 页 背景 进行 填充 。 这 是 因为 代码 中 设置 了 背景 图 不 重复 平 铺 。 


Ganperi boc curd repeat D ~ 
HP WE) SEV) Rs IRM WMH 


纱 阳 无 时 好 ， 只 是 近 萌 析 ! 








函 Unttled-157 -Ox 
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<head> 
<title> 共 景 图 片 重复 </title> 
<style> 
body{ 
background-image:url (61.jp8); 
background-repeat:no-repeat 


} 
</style> 
<head> 


<body > 
<p> 少 阳 无 限 好 ， 只 是 近 黄 错 ! </p> 


IEDEEE 瑟 瑟 























10-45 ”代码 窗口 10-46 ”背景 图 不 重复 平 铺 


同样 可 以 在 上 面 代码 中 ， 设 置 background-repeat 的 属性 值 为 其 他 值 。 例 如 ， 可 以 设置 值 
为 repeat-x， 表 示 图 片 在 水 平方 向 平 铺 。 此 时 ,在 IE 11.0 浏览 器 中 的 浏览 效果 如 图 10-47 


所 示 。 


会 zu 


司 Cwampwwbadgyendrepea 让” 总 总 
| gHn Wa SE WaAN IEm m0 





多 阳 无 展 好 ， 只 是 近 黄 香 ! 


出 上 省 凡 基 启 由 由 中 时 国 





10-47 ”水 平方 向 平 铺 
4. 背景 图 片 显示 


使 用 background-attachment 属性 可 以 设 定 背景 图 片 是 否 随 文档 一 起 滚动 ， 这 样 可 以 使 背 
景 图 片 始终 处 于 视野 范围 内 ， 以 避免 出 现 因 页 面 的 滚动 而 消失 的 情况 。 该 属性 包含 两 个 属性 
值 ， 即 scroll 和 fixed， 并 适用 于 所 有 元 素 ， 如 表 10-8 所 示 。 


表 10-8 background-attachment 属性 值 





训 央 状 辐 部 SSO 珀 祝 





scroll 默认 值 ， 当 页 面 滚 动 时 ， 背 景 图 片 随 页 面 一 起 滚动 
背景 图 片 固定 在 页 面 的 可 见 区 域 里 





新 建 空白 网 页 文档 ， 在 【代码 】 视 图 中 ， 输 入 以 下 内 容 ， 如 图 10-48 所 示 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 背 景 显示 方式 </title> 

<style> 

body{ 
background-image:url (01.jpg); 
background-repeat:no-repeat; 
background-attachment:fixed; 

} 


Pi 
text-indent:2em; 
line-height:30px; 
} 
hli 
text-align:center; 
} 
</style> 
<head> 
<body> 
<h1> 兰 亭 序 </h1> 
<p> 


永和 九 年 ， 岁 在 燃 (gui) 丑 ， 暮 春之 初 ， 会 于 会 稽 (kuai ji) 山 阴 之 兰亭 ， 修 祺 (xi) 事 也 。 群 贤 毕 
至 ， 少 长 感 集 。 此 地 有 崇山峻岭 ， 茂 林 修 竹 ， 又 有 清流 激 油 (tuan) ， 映 带 左 右 。 引 以 为 流 盘 (shang) 
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曲 ( gm) 水 ， 列 坐 其 次 ， 虽 无 丝竹 管弦 之 盛 ， 一 筋 (shang) 一 咏 ， 亦 足以 畅 叙 幽 情 。 

</p> 

<p> 是 日 也 ， 天 朗 气 清 ， 惠 风 和 畅 。 爷 观 宇宙 之 大 ， 俯 察 品 类 之 盛 ， 所 以 游 目 对 (chéng) 怀 ， 足 以 极 视 
听 之 娱 ， 信 可 乐 也 。</p> 

<p> 夫人 之 相 与 ， 俯 仰 一 世 。 或 取 诸 怀抱 ， 晤 言 一 室 之 内 ;或 因 寄 所 托 ， 放 浪 形 通 (hki) 之 外 。 虽 趣 

(qi) 舍 万 殊 ， 静 躁 不 同 ， 当 其 欣 于 所 遇 ， 和 暂 得 于 己 ， 快 然 自足 ， 不 知 老 之 将 至 。 及 其 所 之 既 倦 ， 情 随 

事 迁 ， 感 慨 系 (xi) 之 矣 。 向 之 所 欣 ， 俯 仰 之 间 ， 已 为 陈 迹 ， 犹 不 能 不 以 之 兴 怀 。 况 修 短 随 化 ， 终 期 于 

尽 。 古 人 云 : “死生 亦 大 矣 。” 沁 不 痛 哉 ! </p> 

<P> 每 览 音 人 兴 感 之 由 ， 若 合 一 契 ， 未 党 不 临 文 唆 (jis) 悼 ， 不 能 喻 之 于 怀 。 固 知 一 死生 为 虚 诞 ， 齐 彭 
痪 (shang) 为 妄 作 。 后 之 视 今 ， 亦 犹 今 之 视 昔 ， 悲 夫 ! 故 列 叙 时 人 ， 录 其 所 述 。 虽 世 殊 事 异 ， 所 以 兴 

怀 ， 其 致 一 也 。 后 之 览 者 ， 亦 将 有 感 于 斯 文 。</p> 


N </body> 
\ SN </html> 
人 在 正 11.0 浏览 器 中 的 浏览 效果 如 图 10-49 所 示 ， 可 以 看 到 网 页 background-attachment 属 

性 的 值 为 fixed 时， 背景 图 片 的 位 置 固定 并 不 是 相对 于 页 面 的 ， 而 是 相对 于 页 面 的 可 视 范 围 。 





函 untede -Ox 
1 BE 
M2 


» Be 
egyf 


-1nage:urt(el.jpg); 
eat: no-repeat; 
achnent: fixed; 











RPEEE} 


pt 
toot-tndents2eny 
Une-hetght:3epx 
1 





到) 蛋 ， 不 能 嗜 之 于 怀 。 国 知 一 死生 
(rhang] 为 于 视 令 ， 亦 针 仿 之 杭 草 ， 耻 去 ! 孝 列 入 时 人 ， 录 居所 
广 。 呈 下 事 内 所 以 江 剑 ， 基 一 包 。 后 二 六 省， 刘 和 有 奈 二 凡 


text-align:center; 


[Eat 





} 
</style> 


























10-48 ”代码 窗口 10-49 ”图 片 显示 方式 


5. 背景 图 片 位 置 


使 用 background-position 属性 可 以 指定 背景 图 片 在 页 面 中 所 处 位 置 。background-position 
的 属性 值 如 表 10-9 所 示 。 


表 10-9 background-position 属性 值 

















属性 值 描 述 

len 设置 图 片 与 边 距 水 平 与 垂直 方向 的 距离 长 度 ， 后 跟 长 度 单位 cm、mm、Ppx 等 
_percentage 以 页 面 元 素 框 的 宽度 或 高 度 的 百分比 放置 图 片 

top 背景 图 片 项 部 居中 显示 

Center 背景 图 片 居中 显示 

bottom 背景 图 片 底部 居中 显示 

left 背景 图 片 左 部 居中 显示 

Tight 背景 图 片 右 部 居中 显示 
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SS。 委 直 对 齐 值 还 可 以 与 水 平 对 齐 值 一 起 使 用 ， 从 而 决定 图 片 的 委 直 位 置 和 水 平 


位置。 
新 建 空白 网 页 文档 ， 在 【代码 】 视 图 中 ， 输 入 以 下 内 容 ， 如 图 10-50 所 示 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 背 景 位 置 设 定 </title> 

<style> 

body{ 
background-image:url (01.jpg); 
background-repeat:no-repeat; 
background-position:top right; 

} 

</style> 

<head> 

<body> 

</body> 

</html> 


在 下 11.0 浏览 器 中 的 浏览 效果 如 图 10-51 所 示 ， 可 以 看 到 网 页 中 显示 背景 ， 其 背景 是 从 
顶部 和 右边 开始 的 。 


洲 关 天 辐 名 SSO 开演 一 一 家 胆 订 睹 裤 赔 注 “ 央 04 浊 全 
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<1DOCTYPE html> 
<html> 


<head> 
<title> 背 景 位 置 设 证 </title> 











oF] 


background-image:url(91.jpg); 
background-repeat:no-repeat’; 
background-position: top right; 


« 团 (5R[#| 它 孝 灶 吕 和 仁 

















10-50 ”代码 窗口 图 10-51 设置 背景 位 置 
使 用 垂直 对 齐 值 和 水 平 对 齐 值 只 能 格式 化 地 放置 图 片 ， 如 果 在 页 面 中 要 自由 地 定义 图 片 
的 位 置 ， 则 需要 使 用 确定 数值 或 百分比 。 此 时 在 上 面 代码 中 ， 可 将 语句 
background-position:top right7 
修改 为 


background-position:20px 30px 


在 正 11.0 浏览 器 中 的 浏览 效果 如 图 10-52 所 示 ， 可 以 看 到 网 页 中 显示 背景 ， 其 背景 是 从 
左上 角 开 始 ， 但 并 不 是 从 (0，0) 坐 标 位 置 开始 ， 而 是 从 (20，30) 坐 标 位 置 开始 。 
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10-52 ”指定 背景 位 置 
10.3.4 ”案例 9 一 一 设计 边框 样式 
使 用 CSS 中 的 border-style、border-width 和 border-color 属性 可 以 设 定 边框 的 样式 、 宽 度 
和 颜色 。 
1. 设置 边框 样式 


border-style 属性 用 于 设 定 边框 的 样式 ， 也 就 是 风格 ， 主 要 用 于 为 页 面 元 素 添加 边框 。 其 
语法 格式 如 下 : 


border-style : none | hidden | dotted | dashed | solid | double | groove | 
ridge | inset | outset 


CSS 设 定 了 9 种 边框 样式 ， 如 表 10-10 所 示 。 














表 10-10 边框 样式 
属性 值 描 述 

none 无 边框 ， 无 论 边框 宽度 设 为 多 大 
dotted 点 线 式 边框 
dashed 破 折 线 式 边框 
solid 直线 式 边框 
double 双 线 式 边框 

00ve 槽 线 式 边框 
ridge 次 线 式 边框 
inset 内 嵌 效 果 的 边框 
OUtset 突起 效果 的 边框 





新 建 空白 网 页 文档 ， 在 【代码 】 视 图 中 ， 输 入 以 下 内 容 ， 如 图 10-53 所 示 。 


<!DOCTYPE html> 
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<html> 

<head> 
<title> 边 框 样式 </title> 
<style> 

BE 


border-style:dotted; 


color: black; 
text-align:center; 
} 
pt 
border-style:double; 
text-indent:2em; 
六 
</style> 
<head> 
<body> 
<h1> 带 有 边框 的 标题 </h1> 
<p> 带 有 边框 的 段落 </p> 
</body> 
</html> 


在 正 11.0 浏览 器 中 的 浏览 效果 如 图 10-54 所 示 ， 可 以 看 到 网 页 中 ， 标 题 hl 显示 的 时 候 
带 有 边框 ， 其 边框 样式 为 点 线 式 边框 ;同样 ， 段 落 也 带 有 边框 ， 其 边框 样式 为 双 线 式 边框 。 

















融 wwineds 
-ET 

由， 

站 
sm 
:Re 

2 
bd 
| 国 

bd ‘text-alig 
地 a 局 
癌 worse cote; 
所 toner, 

区 } 

四: 
et 
7 be 

加 > 清 有 和 的 村 是 cyha 
5 A 
四 em 

</html> 
La 
图 10-53 ”代码 窗口 


- OO x 
科 CAUsers\qiangu\Doc 人 ”0 | 感 边框 样式 
文件 (F) 。 蝙 器 (E) ”查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 














市 有 边框 的 标题 








图 10-54 ”设置 边框 


border-color 属性 用 于 设 定 边框 颜色 ， 如 果 不 想 与 页 面 元 素 的 颜色 相同 ， 则 可 以 使 用 该 属 
性 为 边框 定义 其 他 颜色 。border-color 属性 语法 格式 如 下 : 


border-color : color 


color 表示 指定 颜色 ， 其 颜色 值 通过 十 六 进 制 和 RGB 等 方式 获取 。 
新 建 空白 网 页 文档 ， 在 【代码 】 视 图 中 ， 输 入 以 下 内 容 ， 如 图 10-55 所 示 。 


<!1DOCTYPE html> 
<html> 
<head> 


<title> 设 置 边框 颜色 </title> 


<style> 


洲 半 天 肢 玫 SSO 开演 一 一 家 胆 订 财 襟 赔 注 ”二 04 浊 鲁 
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Pi 
border-style:double; 
border-color:red; 
text-indent :2em; 

} 

</style> 

<head> 

<body> 
<p> 边 框 颜色 设置 </p> 
<p style="border-style:solid; border-color:red blue yellow green"> 

分 别 定义 边框 颜色 
</p> 
</body> 
</html> 


在 正 11.0 浏览 器 中 的 浏览 效果 如 图 10-56 所 示 ， 可 以 看 到 网 页 中 ， 第 一 个 段落 边框 颜色 
设置 为 红色 ， 第 二 个 段落 边框 颜色 分 别 设置 为 红 、 蓝 、 黄 和 绿 。 
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10-55 ”代码 窗口 10-56 ”设置 边框 颜色 
3. 设置 边框 线 宽 
在 CSS 中 ， 可 以 通过 设 定 边框 宽度 来 增强 边框 效果 。border-width 属性 就 是 用 来 设 定 边框 
宽度 ， 其 语法 格式 如 下 : 


border-width : medium | thin | thick | length 


其 中 预 设 有 3 种 属性 值 ， 即 medium、thin 和 thick， 另 外 ， 还 可 以 自行 设置 宽度 (width)， 
如 表 10-11 所 示 。 


表 10-11 border-width 属性 














属性 值 描 述 
medium 默认 值 ， 中 等 宽度 
thin 比 medium 细 
thick 比 medium 粗 
len 自 定义 宽度 
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新 建 空白 网 页 文档 ， 在 【代码 】 视 图 中 ， 输 入 以 下 内 容 ， 如 图 10-57 所 示 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 设 置 边框 宽度 </title> 
<head> 
<body> 
<p style="border-style:dotted; border-width:medium; "> 边框 宽度 设置 </p> 
<p style="border-style:dashed;border-width:thin;"> 边 框 宽度 设置 </p> 
<p style="border-style:solid; border-width:12px;"> 
分 别 定义 边框 宽度 
</p> 
</body> 
</html> 


在 正 11.0 浏览 器 中 的 浏览 效果 如 图 10-58 所 示 ， 可 以 看 到 网 页 中 3 个 段落 边框 以 不 同 的 
粗细 显示 。 


二 cteirgu poco a borier wiom me nen” -Ox 





六 此 状 阴 SSO 汪 价 一 外 洲 六 洲 _ 志 0! 渤 国 












日 x 
































好 司 CAUsers\qiangu\Doc 只 - C 大 设置 边框 宽度 NN 
文件 ( 多久 (E) 查看 (收藏 交 A) 工具 (T) 帮助 HH) 
他 
[oy tyle; dotted; border-width;medium; 
加 ye: sashediborder-wideh:tht 
四 
Sa er se at mernaoapr> 
E a 
网 :Re 昌 
BM. 
图 10-57 ”代码 窗口 10-58 ”设置 边框 线 宽 


4. 设置 边框 复合 属性 

border 属性 集合 了 上 述 所 介绍 的 3 种 属性 ， 为 页 面 元 素 设 定 边框 的 宽度 、 样 式 和 颜色 。 
语法 格式 如 下 : 

border : border-width || border-style || border-color 


新 建 空白 网 页 文档 ， 在 【代码 】 视 图 中 ， 输 入 以 下 内 容 ， 如 图 10-59 所 示 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 边 框 复合 属性 设置 </title> 

<head> 

<body> 

<p style="border:dashed red 12px"> 边 框 复合 属性 设置 </p> 

</body> 

</html> 


在 正 11.0 浏览 器 中 的 浏览 效果 如 图 10-60 所 示 ， 可 以 看 到 网 页 中 ， 段 落 边 框 样式 以 破 折 
线 显示 、 颜 色 为 红色 、 宽 度 为 12 像素 。 


. 
23@ 
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- 0O x 
全 CAUsers\qiangu\Doc 内 ~ C | 情 边 本 复合 尾 性 设置 
文件 中 帝 辣 (E) 查看 (V) 收 基 夫 (A) 工具 (T 帮助 (H) 


<head> 
<title> 边 框 复合 属性 设置 </title> 
<head> 
<body > 
<p style="border:dashed red 12px"> as dd 
合 属性 设置 </p> 框 复合 属性 说 
< [| 


















图 10-59 代码 窗口 图 10-60 设置 边框 复合 属性 


10.3.5 “案例 10 一 一 设置 列表 样式 

在 网 页 设计 中 ， 项 目 列表 用 来 罗列 显示 一 系列 相关 的 文本 信息 ， 包 括 有 序 、 无 序 和 自 定 
义 列表 等 ， 当 引入 CSS 后 ， 就 可 以 使 用 CSS 来 设置 项 目 列表 的 样式 了 。 

1. 设置 无 序列 表 


无 序列 表 <ul> 是 网 页 中 常见 元 素 之 一 ， 使 用 <li> 标 记 罗 列 各 个 项 目 ， 并 且 每 个 项 目前 面 都 
带 有 特殊 符号 ， 如 黑色 实心 圆 等 。 在 CSS 中 ， 可 以 通过 list-style-type 属性 来 定义 无 序列 表 前 
面 的 项 目 符号 。 对 于 无 序列 表 ， 其 语法 格式 如 下 : 


list-style-type : disc | circle | square | none 
其 中 ，list-style-type 参数 值 含义 ， 如 表 10-12 所 示 。 
表 10-12 无 序列 表 常 用 符号 





参 数 说 明 
disc 实心 圆 
circle 空心 贺 
Square 实心 方块 
none 不 使 用 任何 标号 
5 可 以 通过 设置 不 同 的 参数 值 ， 为 list-style-type 设置 不 同 的 特殊 符号 ， 从 而 改 
< 变 无 序列 表 的 样式 。 


新 建 空白 网 页 文档 ， 在 【代码 】 视 图 中 ， 输 入 以 下 内 容 ， 如 图 10-61 所 示 。 


<!IDOCTYPE html> 

<html> 

<head> 

<title> 设 置 无 序列 表 </title> 

<style> 

| 
margin:0px; 
padding:0px; 


font-size:12px; 


. 
pi 


margin:5px 0 0 Spx; 
Color:#3333FF; 
font-size:14px; 
font-family:" 幼 圆 "; 


width:300px; 


margin:l0px 0 0 10px7 


border:lpx #FF0000 dashed; 


diy ul 


margin-left:40px; 


list-style-type: disc; 


div LE 


margin:5px 0 Spx 07 


, 
</style> 
</head> 
<body> 


color:blue; 


text-decoration:underline; 


<div class="big01"> 


<p> 娱 乐 焦点 </p> 


<ul> 


<1i> 换 季 肌 闹 “ 公 主 病 ” 美 肤 急救 快 登场 </1i> 


<1i> 来 自 12 星座 的 你 认 准 单 门 轻松 瘦 </1i> 


<1i> 男 人 30“ 豆 腐 渣 ” 如 何 延 缓 肌肤 衰老 </1i> 
<1i> 打 造 天 生 美肌 名 媛 爱 物 强 K 性 价 比 ! </1i> 


<1i> 夏 裙 又 有 新 花样 拼接 图 案 最 时 右 </1i> 


</ul> 
</div> 
</body> 
</html> 


在 下 11.0 浏览 器 中 的 浏览 效果 如 图 10-62 所 示 ， 可 以 看 到 显示 了 一 个 导航 栏 ， 导 航 栏 中 
存在 着 不 同 的 导航 信息 ， 每 条 导航 信息 前 面 都 是 使 用 实心 圆 作为 每 行 信息 开始 。 





[ear 








| 








- OO x 
司 CAUsers\qiangu\Doc ”站 设置 无 序列 表 














图 10-61 代码 窗口 





10-62 ”用 无 序列 表 制 作 导航 菜单 


洲 关 养 辐 名 SSO 开 注 一 一 宜昌 订 财 裤 赔 注 “二 01 小 名 
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2. 设置 有 序列 表 


使 用 有 序列 表 标 记 <ol> 可 以 创建 具有 顺序 的 列表 ， 如 每 条 信息 前 面 加 上 1、2、3、4 等 。 
如 果 要 改变 有 序列 表 前 面 的 符号 ， 同 样 需要 利用 list-style-type 属性 ， 只 不 过 属性 值 不 同 。 


对 于 有 序列 表 ，list-style-type 语法 格式 如 下 : 


list-style-type : decimal | lower-roman | upper-roman | lower-alpha | 


upper-alpha | none 


其 中 ，list-style-type 参数 值 含义 ， 如 表 10-13 所 示 。 


表 10-13 有 序列 表 常用 符号 


decimal 
lower-roman 
upper-roman 
lower-alpha 
upper-alpha 


none 


新 建 空白 网 页 文档 ， 在 【代码 】 视 图 中 ， 输 入 以 下 内 容 ， 


<!DOCTYPE html> 
<html> 
<head> 
<title> 设 置 有 序列 表 </title> 
<style> 
Ww 

margin:0px; 

padding:0px; 

font-size:12px; 


margin:5px 0 0 Spx; 

color:#3333FF; 

font-size:14px; 
font-family:" 幼 圆 "; 


阿拉 伯 数 字 
小 写 罗 马 数字 
大 写 罗 马 数字 
小 写 英文 字母 
大 写 英文 字母 
不 使 用 项 目 符号 


border-bottom-width:1px; 
border-bottom-style:solid; 


divt{ 
width:300px; 
margin:l0px 0 0 10px7 
border:lpx #F9B1C9 solid; 
. 
div oll 
margin-left:40px; 
list-style-type: decimal; 
vf 
margin:5px 0 Spx 0; 


如 图 10-63 所 示 。 


color:blue; 
F 
</style> 
</head> 
<body> 
<div class="big"> 
<p> 娱 乐 焦点 </p> 
<ol> 
<1i> 换 季 肌 闹 “ 公 主 病 ” 美 肤 急救 快 登场 </1i> 
<1i> 来 自 12 星座 的 你 认 准 日 门 轻松 瘦 </1i> 
<1i> 男 人 30“ 豆 腐 渣 ” 如 何 延缓 肌肤 衰老 </1i> 
<1i> 打 造 天 生 美肌 名 媛 爱 物 强 K 性 价 比 ! </1i> 
<1i> 夏 裙 又 有 新 花样 拼接 图 案 最 时 髦 </1i1> 
</ol> 
</div> 
</body> 
</html> 


在 正 11.0 浏览 器 中 的 浏览 效果 如 图 10-64 所 示 ， 可 以 看 到 显示 了 一 个 导航 栏 ， 导 航 信息 
前 面 都 带 有 相应 的 数字 ， 表 示 其 顺序 。 导 航 栏 具有 红色 边框 ， 并 用 一 条 蓝 线 将 题目 和 内 容 
分 开 。 











- 0O x 
站 CUsers\qiangu\Doc ”C0C 大 设置 有 序列 表 
文件 (F) 。 妨 强 (E) 查看 (V) 效 臣 闪 (A) 工具 (T) 帮助 (H) 











扰 乐 焦点 
1 摘 季 肌 亲 ` 公 主 痛 " 凌 肤 急 要 快 登场 
2 来 自 12 星 座 的 你 认 准 串门 既 检疫 
3 男人 30 豆腐 童 " 如 何 延 组 肌肤 衷 老 
4 打造 天 生 美肌 名 组 爱 物 强 K 性 价 比 ! 











5 更 当 又 有 新 花样 拼接 图 案 最 时 蛇 
图 10-63 ”代码 窗口 图 10-64 ”用 有 序列 表 制作 菜单 
FE 上 面 代码 中 ， 使 用 list-style-type: decimal 语句 定义 了 有 序列 表 前 面 的 符号 。 严 


用 站 。” 格 来 说 ， 无 论 是 <ul> 标 记 还 是 <ol> 标 记 ， 都 可 以 使 用 相同 的 属性 值 ， 而 且 效果 完全 
相同 ， 即 二 者 通过 list-style-type 可 以 通用 。 


10.4 ”综合 案例 一 一 制作 简单 公司 主页 


打开 各 种 类 型 商业 网 站 ， 最 先 映 入 眼帘 的 就 是 首页 ， 也 称 为 主页 。 作 为 一 个 网 站 的 门 
户 ， 主 页 一 般 要 求 版 面 整洁 、 美 观 大 方 。 结 合 前 面 学 习 的 背景 和 边框 知识 ， 创 建 一 个 简单 的 
商业 网 站 。 具 体操 作 步 骤 如 下 。 

基于 DY 分 析 需 求 。 

在 本 案例 中 ， 主 页 包括 了 3 个 部 分 ， 一 部 分 是 网 站 Logo， 一 部 分 是 导航 栏 ， 最 后 一 部 分 
是 主页 显示 内 容 。 网 站 Logo 处 使 用 了 一 个 背景 图 来 代替 ， 导 航 栏 使 用 表格 实现 ， 内 容 列表 使 
用 无 序列 表 实 现 。 案 例 完成 后 ， 效 果 如 图 10-65 所 示 。 


洲 卡 六 周 浇 SSO 末 寡 一 一 训 册 洒 央 其 畏 半 几 01 小 全 
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EEIRP9 构建 基本 HIML。 

为 了 划分 不 同 的 区 域 ，HTML 页 面 需要 包含 不 同 的 div 层 ， 每 一 层 代 表 一 个 内 容 。 一 个 
div 包含 背景 图 ， 一 个 div 包含 导航 栏 ， 一 个 div 包含 整体 内 容 ， 内 容 又 可 以 划分 为 两 个 不 同 
的 层 。 其 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 公 司 主页 </title> 

</head> 

<body> 

<center> 

<div> 

<div class="divl" align=center></div> 
<div class=div2> 

<table width=99%><tr align=center><td> 首 页 </td><td> 最 新 消息 </td><td> 产 品 展示 
</td><td> 销 售 网 络 </td><td> 人 才 招 聘 </td><td> 客 户 服务 </td></tr></table> 
</div> 

<div class=div3> 

<div class=div4> 

<ul>. 

<1i> 公 司 举办 2017 科技 辩论 大 赛 </1i> 
<1i> 企 业 安 全 知识 大 比武 </1i> 
<1i> 优 秀 员工 评比 活动 规则 </1i> 
<1i> 人 才 招 聘 信息 </1i> 

</ul> 

</div> 

<div i 

<ul> 成 功 案 

时 光村 仿生 4j 公 司 </ 1i> 
<1i> 美 衣服 饰 有 限 公 司 </1i> 

<1i> 天 力 科技 有 限 公 司 </1i> 
<1i> 美 方 豆 制 品 有 限 公 司 </1i> 

</ul> 

</div> 

</div> 

</div> 

</center> 

</body> 

</html> 


在 正 11.0 浏览 器 中 的 浏览 效果 如 图 10-66 所 示 ， 可 以 看 到 在 网 页 中 显示 了 导航 栏 和 两 个 列 
表 信息 。 





国 CwempwmwGa+ 也 - C| 等 人 页 
HN MAD EV) Ws TIAN WH) 
首页 ”最 新 消息 。 产品 展示 。 “销售 网 络 。 人 才 招聘 。 客户 服务 








公司 党 力 2017 科 技 状 论 大 春 
企业 安全 知识 大 比 起 
二 则 

人 才 招聘 信 


区 Es 
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图 10-65 ”商业 网 站 主页 图 10-66 基本 HTML 结构 


添加 CSS 代码 ， 设 置 背 景 Logo: 


<style> 
-divlt 
height:100px; 
width:820px; 
background-image:url (03.jpg); 
background-repeat:no-repeat; 
background-position:center; 
background-size:cover; 


} 
</style> 
在 正 11.0 浏览 器 中 的 浏览 效果 如 图 10-67 所 示 ， 可 以 看 到 在 网 页 顶部 显示 了 一 个 背景 
图 ， 此 背景 图 覆盖 整个 div 层 ， 且 不 重复 。 并 且 背 景 图 片 居中 显示 。 
EEC 添加 CSS 代码 ， 设 置 导 航 栏 : 


-div2{ 
width:820px; 
background-color:#d2e7ff; 


是 
tablel{ 
font-size:12px; 
font-family:" 幼 圆 "; 
i 


在 正 11.0 浏览 器 中 的 浏览 效果 如 图 10-68 所 示 ， 可 以 看 到 在 网 页 中 导航 栏 背景 色 为 浅 蓝 
色 ， 表 格 中 字体 大 小 为 12 像素 ， 字 体 类 型 是 幼 圆 。 
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首页 。 最 新 消息 产品 展示 。 博信 网 给 。 ”入 才 招聘 。 ”客户 服务 
及 六 消 息 
公司 举办 2017 科 技 针 沦 大 赛 
人 
优先 号 工 证 由 活动 秽 唱 
人 才 祝 联 信 
成 功 守 他 
吉本 和 起 和 
| : 2 
美 六 可 制 品 有 限 公司 “| 
< > < > 
图 10-67 设置 背景 图 10-68 ”设置 导航 栏 
B53 添加 CSS 代码 ， 设 置 内 容 样式 : 
-div31{ 
width:820px; 
height:320px; 


border-style:solid; 
border-color:#ffeedd; 
border-width:10px; 
border-radius:60px; 


Ul 
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} 
-div41{ 
width:810px; 
height:150px; 
text-align:left; 
border-bottom-width: 2px; 
border-bottom-style:dotted; 
border-bottom-color:#ffeedd; 
-div5{ 
width:810px; 
height:150px; 
text-align:left; 
} 


在 正 11.0 浏览 器 中 的 浏览 效果 如 图 10-69 所 示 ， 可 以 看 到 在 网 页 中 内 容 显 示 在 一 个 圆 角 
边框 中 ， 两 个 不 同 的 内 容 块 中 间 使 用 虚线 隔 开 。 
添加 CSS 代码 ， 设 置 列表 样式 。 
ulf{ 
font-size:15px; 
font-family: "楷体 "; 





} 
在 下 11.0 浏览 器 中 的 浏览 效果 如 图 10-70 所 示 ， 可 以 看 到 在 网 页 中 列表 字体 大 小 为 15 
像素 ， 字 体 类 型 为 楷体 。 
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Ch] 
a 
Sn 
a 
10-69 CSS 修饰 边框 10-70 ”美化 列表 信息 


10.5 疑难 解 惑 


疑问 1: 滤 镜 效果 是 IE 浏览 器 特有 的 效果 ， 那 么 在 Firefox 中 能 不 能 实现 呢 ? 


答 : 滤 镜 效果 虽然 是 下 浏览 器 特有 的 效果 ， 但 使 用 Firefox 浏览 器 时 ， 一 些 属 性 也 可 以 
实现 。 例 如 ， 下 浏览 器 的 阴影 效果 ， 在 Firefox 网 页 设计 中 ， 可 以 先 在 文字 下 面 再 登 一 层 浅 色 
的 同样 的 字 ， 然 后 做 2 像素 的 错位 ， 就 可 以 制造 出 有 阴影 的 假象 。 


S 220 


疑问 2: 文字 和 图 片 导 航速 度 谁 快 呀 ? 


答 : 使 用 文字 作 导 航 栏 速度 最 快 。 文 字 导航 不 仅 速度 快 ， 而 且 更 稳定 。 比 如 ， 有 些 用 户 
上 网 时 会 关闭 图 片 。 在 处 理 文本 时 ， 除 非特 别 需要 ， 否 则 不 要 为 普通 文字 添加 下 夯 线 。 就 像 
用 户 需 要 识别 哪些 能 单 击 一 样 ， 读 者 不 应 当 将 本 不 能 单 击 的 文字 误 认 为 能 够 单 击 。 
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第 11 章 
架构 师 的 大 比拼 
一 一 利用 Div+ 

CSS 布局 网 页 


使 用 CSS 布局 网 页 是 一 种 很 新 的 概念 ， 它 完全 不 同 于 传统 的 网 页 布局 习惯 。 
它 首 先 对 页 面 从 整体 上 用 <div> 标 记 进 行 了 分 块 ， 然 后 对 各 个 块 进行 CSS 定位 ， 最 
后 再 在 各 个 块 中 添加 相应 的 内 容 。 本 章 就 来 介绍 网 页 布局 中 的 一 些 典型 范例 。 


Dreamweaver CC 动态 网 站 开发 
案例 课堂 (第 2 版 ) 罗 一 


11.1 认识 并 创建 层 


在 网 页 设计 中 ， 由 于 层 具 有 很 强 的 灵活 性 ， 因 此 被 广泛 应 用 ， 利 用 层 不 仅 可 以 精确 设置 
对 象 所 处 的 位 置 ， 还 能 实现 一 些 简 单 的 效果 。 


11.1.1 层 的 概念 


在 Dreamweaver CC 中 ， 层 就 是 Div，Div 元 素 是 用 来 为 网 页 内 容 提供 结构 和 背景 的 块 元 
素 。Div 的 起 始 标签 和 结束 标签 之 间 的 所 有 内 容 都 是 用 来 构成 这 个 块 的 ， 其 中 所 包含 元 素 的 特 
性 由 Div 标签 的 属性 控制 。 

通过 Div 元 素 ， 可 以 把 页 面 分 割 为 独立 的 、 不 同 的 部 分 ， 使 页 面 内 容 结构 化 、 模 块 化 。 
11-1 所 示 为 一 个 页 面 的 整体 架构 。 
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图 11-1 页 面 整体 架构 


11.1.2 ”案例 1 一 一 使 用 Dreamweaver 创建 层 


在 Dreamweaver CC 中 ， 用 户 可 以 通过 两 种 方法 来 创建 层 : 一 种 是 通过 【插入 】 菜 单 下 
【结构 】 子 菜单 中 的 Div 命令 来 完成 ， 另 一 种 是 通过 【插入 】 面 板 中 的 Div 按钮 来 完成 。 这 两 
种 方法 的 具体 操作 相似 ， 下 面 介绍 创建 层 的 具体 操作 步骤 。 

ED 启动 Dreamweaver CC， 将 光标 定位 在 需要 插入 层 的 位 置 ， 如 图 11-2 所 示 。 

EEJ2 选择 【插入 】 一 【结构 】 一 Div 菜单 命令 ， 如 图 11-3 所 示 。 
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11-2 定位 插入 层 的 位 置 11-3 选择 Div 菜单 命令 
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EEJRS 弹出 【插入 Div】 对 话 框 ， 单 击 【 插 入 】 下 拉 按 钮 ， 在 弹出 的 下 拉 列 表 中 选择 
【在 插入 点 】 选 项 ， 如 图 11-4 所 示 。 

EEC 单 击 【 确 定 】 按 钮 ， 即 可 完成 Div 的 插入 ， 并 保存 网 页 ， 按 F12 键 进入 页 面 预 
览 效果 ， 在 其 中 可 以 看 到 创建 的 Div 区 域 ， 如 图 11-5 所 示 。 
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司 CUsers\qiangu\Doc P -0 | 千 天 要 文档 
文件 日 。 入 疆 (E) 查看 V) 收 大夫 (A) 工具 (Tm 帮助 (H) 
此 处 显示 新 Div 标签 的 内 容 

















11-4 【插入 Div】 对 话 框 11-5 ”预览 效果 


11.2 ”Div 层 的 定位 方法 


将 网 页 上 每 个 HTML 元 素 ， 认 为 都 是 长 方形 的 盒子 ， 是 网 页 设计 上 的 一 大 创新 。 在 控制 
页 面 方面 ， 盒 子 模型 有 着 至 关 重要 的 作用 ， 熟 练 掌握 盒子 模型 以 及 盒子 模型 各 个 属性 ， 是 控 
制 页 面 中 每 个 HIML 元素 的 前 提 。 


11.2.1 盒子 模型 的 概念 


在 CSS 中 ， 所 有 的 页 面 元 素 都 包含 在 一 个 矩形 框 内 ， 称 为 合子。 盒子 模型 是 由 margin( 边 
界 )、border( 边 框 )、padding( 空 白 ) 和 content( 内 容 ) 几 个 属性 组 成 。 此 外 ， 在 盒子 模型 中 还 具备 
高 度 和 宽度 两 个 辅助 属性 。 盒 子 模 型 如 图 11-6 所 示 。 
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11-6 ”盒子 模型 效果 示意 
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从 图 11-6 中 可 以 看 出 ， 盒 子 模 型 包含 以 下 4 个 部 分 。 

(1) content( 内 容 ): 内 容 是 盒子 模型 中 必需 的 一 部 分 ， 内 容 可 以 是 文字 、 图 片 等 元 素 。 

(2) padding( 空 白 ): 也 称 内 边 距 或 补 白 ， 用 来 设置 内 容 和 边框 之 间 的 距离 。 

(3) border( 边 框 );， 可 以 设置 内 容 边 框 线 的 粗细 、 颜 色 和 样式 等 ， 前 面 已 经 介绍 过 。 

(4) margin( 边 界 ): 外 边 距 ， 用 来 设置 内 容 与 内 容 之 间 的 距离 。 

一 个 盒子 的 实际 高 度 (宽度 ) 是 由 contenttpadding+bordertmargin 组 成 的 。 在 CSS 中 ， 可 以 
通过 设 定 width 和 height 来 控制 content 的 大 小 ， 并 且 对 于 任何 一 个 盒子 ， 都 可 以 分 别 设 定 4 
条 边 的 border、padding 和 margin。 


11.2.2 ”案例 2 一 一 定义 网 页 border 区 域 


border 是 内 边 距 和 外 边 距 的 分 界线 ， 可 以 分 离 不 同 的 HTML 元 素 。border 有 3 个 属性 ， 
分 别 是 样式 (style)、 颜 色 (coloD 和 宽度 (width)。 
【 例 11-1】 定义 网 页 的 border 区 域 (案例 文件 为 ch11\11.1.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<title>border 边框 </title> 
<style type="text/css"> 
-divi{ 
border-width:10px; 
border-color:#ddccee; 
border-style:solid; 
width:410px; 
} 
-div2{ 
border-width:1px; 
border-color:#adccdd; 
border-style:dotted; 
width:410px; 
} 
.div3{ 
border-width:1px; 
border-color:#457873; 
border-style:dashed; 
width:410px; 
} 
</style> 
</head> 
<body> 
<div class="divl"> 
这 是 一 个 宽度 为 10px 的 实 线 边框 。 
</div> 
<br /><br /> 
<div class="div2"> 
这 是 一 个 宽度 为 1px 的 虚线 边框 。 
</div> 
<br’ /><br /> 
<div class="div3"> 
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这 是 一 个 宽度 为 1px 的 点 状 边框 。 
</div> 

</body> 

</html> 

在 下 11.0 浏览 器 中 的 浏览 效果 如 图 11-7 所 示 ， 可 以 看 到 显示 了 3 个 不 同 风格 的 盒子 ， 
第 一 个 盒子 边框 线 宽度 为 10 像素 ， 边 框 样式 为 实 线 ， 颜 色 为 紫色 ; 第 二 个 盒子 边框 线 宽度 为 
1 像素 ， 边 框 样式 是 虚线 边框 ， 颜 色 为 浅 绿色 ;第 三 个 盒子 边框 宽度 为 1 像素 ， 边 框 样式 是 点 
状 边框 ， 颜 色 为 绿色 。 





- DO x 
闫 CWwampwww\11.1h P - 上 感 border 边 枉 
文件 (站 ” 妨 铝 (E) 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 


这 是 一 个 宽度 为 10px 的 实 线 边框 。 





这 是 一 个 宽度 为 1px 的 虚线 边框 。 


这 是 一 个 宽度 为 1px 的 点 状 这 往 





图 11-7 设置 盒子 边框 
11.2.3 ”案例 3 一 一 定义 网 页 padding 区 域 


在 CSS 中 ， 可 以 设置 padding 属性 定义 内 容 与 边框 之 间 的 距离 ， 即 内 边 距 的 距离 。 语 法 
格式 如 下 : 


padding : length 

padding 属性 值 可 以 是 一 个 具体 的 长 度 ， 也 可 以 是 一 个 相对 于 上 级 元 素 的 百分比 ， 但 不 可 
以 使 用 负 值 。padding 属性 能 为 盒子 定义 上 、 下 、 左 、 右 间隙 的 宽度 ， 也 可 以 单独 定义 各 方位 
的 宽度 。 常 用 形式 如 下 : 


padding :padding-top | padding-right | padding-bottom | padding-left 


如 果 提 供 4 个 参数 值 ， 将 按 顺 时 针 方 向 作用 于 四 边 。 如 果 只 提供 一 个 参数 值 ， 将 用 于 全 
部 的 四 条 边 ， 如 果 提 供 两 个 参数 值 ， 第 一 个 作用 于 上 下 两 边 ， 第 二 个 作用 于 左右 两 边 。 如 果 
提供 3 个 参数 值 ， 第 1 个 用 于 上 边 ， 第 2 个 用 于 左 、 右 两 边 ， 第 3 个 用 于 下 边 。 

其 具体 含义 如 表 11-1 所 示 。 


表 11-1 padding 属性 子 属性 









设 定 上 间隙 
设 定 下 间隙 
设 定 左 间隙 
设 定 右 间隙 







padding-bottom 
padding-left 











adding-right 
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【 例 11-2】 定义 网 页 的 padding 区 域 (案例 文件 为 ch11\11.2.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<title>padding</title> 
<style type="text/css"> 
.waif 
width:400px; 
height:250px; 
border:1lpx #993399 solid; 
} 
img{ 
max-height:120px; 
padding-left:50px; 
padding-top:20px; 
} 
</style> 
</head> 
<body> 
<div class="wai"> 
<img src="07.jpg" /> 
<p> 这 张 图 片 的 左 内 边 距 是 50px， 顶 内 边 距 是 20px</p> 
</div> 
</body> 
</html> 


在 正 11.0 浏览 器 中 的 浏览 效果 如 图 11-8 所 示 ， 可 以 看 到 一 个 div 层 中 显示 了 一 张 图 片 。 
此 图 片 可 以 看 作 一 个 盒子 模型 ， 并 定义 了 图 片 的 左 内 边 距 和 上 内 边 距 的 效果 。 可 以 看 出 ， 内 
边 距 其 实 是 对 象 mg 和 外 层 Div 之 间 的 距离 。 
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这 张 图 片 的 左 内 边 距 是 50px， 顶 内 边 下 是 20px 








图 11-8 ”设置 内 边 距 
11.2.4 ”案例 4 一 一 定义 网 页 margin 区 域 


margin 用 来 设置 页 面 中 元 素 和 元 素 之 间 的 距离 ， 即 定义 元 素 周 围 的 空间 范围 ， 是 页 面 排 
版 中 一 个 比较 重要 的 概念 。 语 法 格式 如 下 : 


margin : auto | length 


其 中 ，auto 表示 根据 内 容 自动 调整 ，length 表示 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 或 
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百分数 。margin 属性 包含 的 4 个 子 属 性 控制 一 个 页 面 元 素 四 周 的 边 距 样式 ， 如 表 11-2 所 示 。 
表 11-2 margin 属性 的 子 属性 
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属性 
margin-top 设 定 上 边 距 
margin-bottom 设 定 下 边 距 
margin-left 设 定 左边 距 
margin-right 设 定 右边 距 玫 
如 果 希 望 很 精确 地 控制 块 的 位 置 ， 需 要 对 margin 有 更 深入 的 了 解 。margin 设置 可 以 分 为 ”里 
行内 元 素 块 之 间 设 置 、 非 行内 元 素 块 之 间 设 置 和 父子 块 之 间 设 置 。 8 
1. 行内 元 素 margin 的 设置 布 
局 
【 例 11-3】 行内 元 素 margin 属性 的 设置 (案例 文件 为 ch11\11.3.html)。 网 
<!DOCTYPE html> NN 
<html> 
<head> 





<title> 行 内 元 素 设置 margin</title> 
<style type="text/css"> 
bs 
spant{ 
background-color:#a2d2ff; 
text-align:center; 
font-family:" 幼 圆 "; 
font-size:12px; 
padding:10px; 
border:lpx #ddeecc solid; 
1 
span.left{ 
margin-right:20px; 
background-color:#a9d6ff; 
} 
span.right{ 
margin-left:20px; 
background-color:#eeb0b07 
一 -> 
</style> 
</head> 
<body> 
<span class="left"> 行 内 元 素 1</span><span class="right"> 行 内 元 素 2</span> 
</body> 
</html> 


在 正 11.0 浏览 器 中 的 浏览 效果 如 图 11-9 所 示 ， 可 以 看 到 一 个 蓝 色 盒子 和 红色 盒子 ， 二 
者 之 间 的 距离 使 用 margin 设置 ， 其 距离 是 左边 盒子 的 右边 距 margin-right 加 上 右边 盒子 的 左 
边 距 margin-left。 
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= 站 污 
@ 于 GWwanpwwnl13hn PD- 0| GiniRaRmoron vig 
文件 (F)。 妨 强 (E)】 重 看 (V) ”收藏 交 (A) 工具 (T) 帮助 (H) 
行 起 元 要 1 Fi 











11-9 ”行内 元 素 margin 设置 
2. 非 行内 元 素 块 之 间 margin 设置 


如 果 不 是 行内 元 素 ， 而 是 产生 换行 效果 的 块 级 元 素 ， 情 况 就 可 能 发 生变 化 。 两 个 换行 块 
级 元 素 之 间 的 距离 不 再 是 margin-bottom 和 margin-top 的 和 ， 而 是 两 者 中 的 较 大 者 。 
【 例 11-4】 非 行内 元 素 块 之 间 margin 设置 (案例 文件 为 ch11\11.4.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 块 级 元 素 的 margin</title> 
<style type="text/css"> 
<!-- 
hli 
background-color:#ddeecc; 
text-align:center; 
font-family:" 幼 圆 "; 
font-size:12px; 
padding:10px; 
border:lpx #445566 solid; 
display:block; 
1 
一 -> 
</style> 
</head> 
<body> 
<hl style="margin-bottom:50px;"> 距 离 下 面 块 的 距离 </h1> 
<hl style="margin-top:30px;"> 距 离 上 面 块 的 距离 </h1> 
</body> 
</html> 


在 下 11.0 浏览 器 中 的 浏览 效果 如 图 11-10 所 示 ， 可 以 看 到 两 个 hl 盒子 ， 二 者 上 下 之 间 
存在 距离 ， 其 距离 为 margin-bottom 和 margin-top 中 较 大 的 值 ， 即 50 像素 。 如 果 修 改 下 面 hl 
盒子 元 素 的 margin-top 为 40 像素 ， 会 发 现 执行 结果 没有 任何 变化 。 如 果 修 改 其 值 为 60 像 
素 ， 会 发 现下 面 的 盒子 会 向 下 移动 10 像素 。 


3. 父子 块 之 间 margin 设置 


当 一 个 div 块 包含 在 另 一 个 div 块 中 间 时 ， 二 者 便 会 形成 一 个 典型 的 父子 关系 。 其 中 子 块 
的 margin 设置 将 会 以 父 块 的 content 为 参考 。 
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11-10 ”设置 上 下 margin 距离 
【 例 11-5】 父子 块 之 间 margin 的 设置 (案例 文件 为 ch11\11.5.html)。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 包 含 块 的 margin</title> 

<style type="text/css"> 

3 

Qivi 
background-color:#fffebb; 
padding:10px; 
border:lpx solid #000000; 

. 

hli 
background-color:#a2d2ff; 
margin-top:0px; 
margin-bottom:30px; 
padding:15px; 
border:lpx dashed #004993; 

text-align:center; 

font-family:" 幼 圆 "; 
font-size:12px; 

一 -> 

</style> 
</head> 

<body> 
<div > 

<h1> 子 块 div</hl> 

</div> 

</body> 

</html> 


在 正 11.0 浏览 器 中 的 浏览 效果 如 图 11-11 所 示 ， 可 以 看 到 子 块 hl 盒子 距离 父 div 下 边界 
为 40 像素 ( 子 块 30 像素 的 外 边 距 加 上 父 块 10 像素 的 内 边 距 )， 其 他 3 边 距 离 都 是 父 块 的 
padding 距离 ， 即 10 像素 。 

在 例 11-5 中 ， 如 果 设 定 了 父 元 素 的 高 度 height 值 ， 并 且 父 块 高 度 值 小 于 子 块 的 高 度 加 上 
margin 的 值 ， 此 时 下 浏览 器 会 自动 扩大 ， 保 持 子 元 素 的 margin-bottom 的 空间 以 及 父 元 素 的 
padding-bottom。 而 Firefox 就 不 会 这 样 ， 会 保证 父 元 素 的 height 高 度 的 完全 吻合 ， 而 这 时 子 
元 素 将 超过 父 元 素 的 范围 。 
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当 将 margin 设置 为 负数 时 ， 会 使 得 被 设 为 负数 的 块 向 相反 的 方向 移动 ， 甚 至 覆盖 在 另外 
的 块 上 。 
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文件 (| 篇 纺 (E) 二 看 (V) 收 芝 夫 (入 工具 大 动 H) 














| a 




















11-11 设置 包括 盒子 的 margin 距离 


11.3 ”使 用 CSS 排版 


Div 在 CSS+Div 页 面 排版 中 是 一 个 块 的 概念 ，Div 的 起 始 标 记 和 结束 标记 之 间 的 所 有 内 
容 都 是 用 来 构成 这 个 块 的 ， 其 中 所 包含 元 素 特性 由 Div 标记 属性 来 控制 ， 或 者 是 通过 使 用 样 
式 表 格式 化 这 个 块 来 进行 控制 。CSS+Div 页 面 排版 思想 是 首先 在 整体 上 进行 <div> 标 记 的 分 
块 ， 然 后 对 各 个 块 进行 CSS 定位 ， 最 后 再 在 各 个 块 中 添加 相应 的 内 容 。 


11.3.1 案例 5 一 一 将 页 面 用 div 分 块 


使 用 CSS+Div 进行 页 面 排版 布局 ， 需 要 对 网 页 有 一 个 整体 构思 ， 即 网 页 可 以 划分 为 几 个 
部 分 。 例 如 ， 上 、 中 、 下 结构 ， 还 是 左 、 右 两 列 结构 ， 还 是 三 列 结构 。 这 时 就 可 以 根据 网 页 
构思 ， 将 页 面 划分 为 几 个 Div 块 ， 用 来 存放 不 同 的 内 容 。 当 然 ， 大 块 中 还 可 以 存放 不 同 的 小 
块 。 最 后 ， 通 过 CSS 属性 ， 对 这 些 Div 进行 定位 。 

在 现在 的 网 页 设计 中 ， 一 般 情 况 下 的 网 站 都 是 上 、 中 、 下 结构 ， 即 上 面 是 页 面 头 部 ， 中 
间 是 页 面 内 容 ， 最 下 面 是 页 脚 ， 整 个 上 、 中 、 下 结构 最 后 放 到 一 个 Div 容器 中 ， 方 便 控 制 。 
页 面 头 部 一 般 用 来 存放 Logo 和 导航 菜单 ， 页 面 内 容 包含 页 面 要 展示 的 信息 、 链 接 和 广告 等 ， 
页 脚 存放 的 是 版 权 信息 和 联系 方式 等 。 

将 上 、 中 、 下 结构 放置 到 一 个 Div 容器 中 ， 方 便 后 面 排版 并 且 便 于 对 页 面 进行 整体 调 
整 ， 如 图 11-12 所 示 。 





整体 页 面容 器 





页 头 








页 面 主体 








页 脾 




















图 11-12 网 页 结构 


11.3.2 ”案例 6 一 一 设置 各 块 位 置 


复杂 的 网 页 布局 ， 不 是 单纯 的 一 种 结构 ， 而 是 包含 多 种 网 页 结构 。 例 如 ， 总 体 上 是 上 中 
下 ， 中 间 分 为 两 列 布局 等 ， 如 图 11-13 所 示 。 


整体 页 面容 器 


> 








页 面 主体 左 侧 页 面 主体 右 侧 














页 肝 
11-13 ”网 页 结构 


页 面 总 体 结构 确认 后 ， 一 般 情 况 下 ， 页 头 和 页 脚 变化 就 不 大 了 。 会 发 生变 化 的 就 是 页 面 
主体 ， 此 时 需要 根据 页 面 展示 的 内 容 ， 决 定 中 间 布 局 采用 什么 样式 ， 是 3 列 水 平分 布 ， 还 是 
两 列 分 布 等 。 


11.3.3 ”案例 7 一 一 用 CSS 定位 


页 面 版 式 确定 后 ， 就 可 以 利用 CSS 对 Div 进行 定位 ， 使 其 在 指定 位 置 出 现 ， 从 而 实现 对 
页 面 的 整体 规划 。 然 后 再 向 各 个 页 面 添加 内 容 。 
下 面 创建 一 个 总 体 为 上 中 下 布局 、 页 面 主体 为 左右 布局 的 CSS 定位 案例 。 


1. 创建 HTML 页 面 ， 使 用 Div 构建 层 
首先 构建 HTML 网 页 ， 使 用 Div 划分 最 基本 的 布局 块 ， 其 代码 如 下 : 


<html> 
<head> 
<title>CSsSs 排版 </title><body> 
<div id="container"> 
<div id="banner"> 页 面 头 部 </div> 
<div id=content > 
<div id="right"> 
页 面 主体 右 侧 
</div> 
<div id="left"> 
页 面 主体 左 侧 
</div> 
</div> 
<div id="footer"> 页 脚 </div> 
</div> 
</body> 
</html> 


上 面 的 代码 创建 了 5 个 层 ， 其 中 ID 名 称 为 container 的 Div 层 是 一 个 布局 容器 ， 即 所 有 
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的 页 面 结构 和 内 容 都 是 在 这 个 容器 内 实现 ， 名 称 为 banner 的 Div 层 是 页 头 部 分 ， 名 称 为 
footer 的 Div 层 是 页 脚 部 分 ， 名 称 为 content 的 Div 层 是 中 间 主 体 ， 该 层 包 含 了 两 个 层 ， 一 个 
是 right 层 ， 一 个 left 层 ， 分 别 放置 不 同 的 内 容 。 

在 正 11.0 浏览 器 中 的 浏览 效果 如 图 11-14 所 示 ， 可 以 看 到 网 页 中 显示 了 这 几 个 层 ， 从 上 
到 下 依次 排列 。 





- 0O x 
居 CAUsers\administrab 避 - 上 | 大 css 振 版 
文件 (D。 匾 弗 (5) 章 看 (V) 收藏 奖 (A) 工具 (T) 。 帮助 (H) 
页 面 头 部 


SN 页 面 主体 右 侧 
页 面 主体 左 侧 
页 脚 


图 11-14 使 用 Div 构建 层 
2. 使 用 CSS 设置 网 页 整体 样式 


然后 需要 对 body 标记 和 container 层 ( 布 局 容器 ) 进 行 CSS 修饰 ， 从 而 对 整体 样式 进行 定 
义 。 代 码 如 下 : 


<style type="text/css"> 

< == 

body { 
margin:0px; 
font-size:16px; 
font-family: " 幼 圆 "; 

上 

#containerf{ 
position:relative; 
width:100%; 

站 

一 -> 

</style> 


上 面 的 代码 只 是 设置 了 文字 大 小 、 字 形 、 布 局 容器 的 宽度 、 层 定位 方式 ， 布 局 容器 充满 
整个 浏览 器 。 

在 正 11.0 浏览 器 中 的 浏览 效果 如 图 11-15 所 示 ， 可 以 看 到 此 时 与 上 一 个 显示 页 面相 比 
较 ， 发 生 的 变化 不 大 ， 只 是 字形 和 字体 大 小 发 生 了 变化 ， 因 为 container 没有 带 有 边框 ， 背 景 
色 无 法 显示 在 该 层 。 











- D x 
司 CAUsers\administrat 崩 - CC | 情 css 排 版 








11-15 ”设置 网 页 整体 样式 


3. 使 用 CSS 定义 页 头 部 分 
接 下 来 就 可 以 使 用 CSS 对 页 头 进行 定位 ， 即 banner 层 ， 使 其 在 网 页 上 显示 。 其 代码 如 下 : 


#banner{ 
height:80px; 
border:lpx solid #000000; 
text-align:center; 
background-color:#a2d9ff; 
padding:10px; 
margin-bottom:2px; 


i 


上 面 首先 设置 了 banner 层 的 高 度 为 80 像素 ， 宽 度 充满 整个 container 布局 容器 ， 下 面 分 
别 设置 边框 样式 、 字 体 对 齐 方式 、 背 景色 、 内 边 距 和 外 边 距 的 底部 等 。 

在 正 11.0 浏 览 器 中 的 浏览 效果 如 图 11-16 所 示 ， 可 以 看 到 在 页 面 顶部 显示 了 一 个 浅 绿色 
的 边框 ， 边 框 充满 整个 浏览 器 ， 边 框 中 间 显 示 了 一 个 “页 面 头 部 ”的 文本 信息 。 


司 CUsers\administras -0 | 感 css 排 版 x 
文件 (月 ”电码 (E) 下 看 (V) 收藏 只 A)】 工具 (T) 孝感 (H) 








页 面 主体 石 侧 
页 面 主体 左 侧 
页 曼 


图 11-16 定义 网 页 头 部 
4. 使 用 CSS 定义 页 面 主体 


在 页 面 主体 如 果 两 个 层 并 列 显示 ， 需 要 使 用 float 属性 ， 将 一 个 层 设置 到 左边 ， 一 个 层 设 
置 到 右边 。 其 代码 如 下 : 


#right{ 
float:right; 
text-align:center; 
width:80%; 
border:lpx solid #ddeecc; 
margin-left:1px; 
height:200px; 
#1left{ 
float:left; 
width:19%; 
border:lpx solid #000000; 
text-align:center; 
height:200px; 
background-color:#bcbcbc; 
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上 面 的 代码 设置 了 这 两 个 层 的 宽度 ，right 层 占 
有 空间 的 80%，left 层 占有 空间 的 19%， 并 分 别 设 
置 了 两 个 层 的 边框 样式 、 对 齐 方 式 和 背景 色 等 。 

在 正 11.0 浏览 器 中 的 浏览 效果 如 图 11-17 所 
示 ， 可 以 看 到 页 面 主体 部 分 分 为 两 个 层 并 列 显示 ， 
左边 背景 色 为 灰色 ， 占 有 空间 较 小 ， 右 侧 背景 色 为 
白色 ， 占 有 空间 较 大 。 


5. 使 用 CSS 定义 页 脚 


最 后 需要 设置 页 脚 部 分 ， 页 脚 通常 在 主体 下 
面 。 因 为 页 面 主体 中 使 用 了 float 属性 设置 层 浮动 ， 
所 以 需要 在 页 脚 层 设置 clear 属性 ， 使 其 不 受 浮动 的 
影响 。 其 代码 如 下 : 

#fo0tert{ 

clear:both; /* 不 受 float 影响 */ 

text-align:center; 

height:30px; 

border:lpx solid #000000; 
background-color:#ddeecc; 

} 

上 面 的 代码 设置 了 页 脚 对 齐 方式 、 高 度 、 边 框 
和 背景 色 等 。 在 IE 11.0 浏览 器 中 的 浏览 效果 如 
图 11-18 所 示 ， 可 以 看 到 页 面 底部 显示 了 一 个 边 
框 ， 背 景色 为 浅 绿色 ， 边 框 充满 整个 Div 布局 容器 。 
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11-17 ”定义 网 页 主体 














页 








图 11-18 ”定义 网 页 页 脚 


11.4 ”常见 网 页 布局 模式 


CSS 的 排版 是 一 种 全 新 的 排版 理念 ， 与 传统 的 表格 排版 布局 完全 不 同 ， 首 先 在 页 面 上 分 
块 ， 然 后 应 用 CSS 属性 重新 定位 。 本 节 就 固定 宽度 布局 进 


行 深入 的 讲解 ， 使 读者 能 够 熟练 掌握 这 些 方法 。 
11.4.1 案例 8 一 一 网 页 单列 布局 模式 


网 页 单列 布局 模式 是 最 简单 的 一 种 布局 形式 ， 也 称 为 
“网 页 1-1-1 型 布局 模式 ”， 图 11-19 所 示 为 网 页 单列 布局 


模式 示意 图 。 
制作 单列 布局 网 页 的 操作 步骤 如 下 。 


L 








本 TD 打开 记事 本 文件 ， 在 其 中 输入 以 下 代码 ， [| | 


该 段 代码 的 作用 是 在 页 面 中 放置 第 一 个 圆 角 甜 





11-19 ”网 页 单列 布局 模式 示意 图 





形 框 。 


<!DOCTYPE html> 

<head> 
<title> 单 列 网 页 布局 </title> 
</head> 

<body> 

<div class="rounded"> 
<h2> 页 头 </h2> 

<div class="main"> 

<p> 

钢 禾 日 当 午 ， 汗 滴 禾 下 土 <br/> 
钢 禾 日 当 午 ， 汗 滴 禾 下 土 </p> 
</div> 

<div class="footer"> 
<p></p> 

</div> 

</div> 

</body> 

</html> 


代码 中 这 组 <div>…</div> 之 间 的 内 容 是 固定 结构 的 ， 其 作用 就 是 实现 一 个 可 以 变化 宽度 
的 圆 角 框 。 在 下 9.0 浏览 器 中 的 浏览 效果 如 图 11-20 所 示 。 
EC 设置 圆 角 框 的 CSS 样式 。 为 了 实现 圆 角 框 效果 ， 加 入 以 下 样式 代码 : 


<style> 

body { 
background: #FFF; 
font: 14px 宋体 ; 
margin:0; 
padding:0; 

; 


潮 称 汗 侣 洁 普 并 山名 中 僵 


关 到 加 讲 SSO +AIQ 酒 兴 


.rounded { 

background: url (images/left-top.gif) top left no-repeat; 
width:100%; 

} 

-rounded h2 { 

background: 

url (images/right-top.gif) 

top right no-repeat; 

padding:20px 20px 10px; 

margin:07 


上 

.rounded .main 1{ 
background: 

url (images/right .gif) 
top right repeat-y; 
padding:10px 20px; 
margin:-20px 0 0 0; 

了 

.rounded .footer { 
background: 
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url (images/left-bottom.gif) 
bottom left no-repeat; 

及 

-rounded .footer P { 
color:red; 
text-align:right; 
background:url (images/right-bottom.gif) bottom right no-repeat; 
display:block; 
padding:10px 20px 20px; 
margin:-20px 0 0 0; 
font:0/0; 

3 

</style> 


在 代码 中 定义 了 整个 盒子 的 样式 ， 如 文字 大 小 等 ， 其 后 的 5 段 以 rounded 开头 的 CSS 样 


式 都 是 为 实现 圆 角 框 的 设置 。 这 段 CSS 代码 在 后 面 的 制作 中 不 需要 调整 ， 直 接 放置 在 
<style></style> 之 间 即 可 ， 在 下 11.0 浏览 器 中 的 浏览 效果 如 图 11-21 所 示 。 





| = 眉 |， 演 二 口 x 


| 团 cAwemp\www\ 风 克利 站 - 此 | 展 网 页 布局 * 司 CWwamp\wwn\ 网 i DC | 居 单列 网 页 布局 x| 
(DNF) 直下 WA 工具 站) 文件 (有 舌 纺 (E) ”三 看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 


EE 
钢 禾 日 当 午 ， 汗 滴 禾 下 土 
钢 禾 日 当 午 ， 汗 滴 下 下 土 


图 11-20 ”添加 网 页 圆 角 框 图 11-21 设置 圆 角 框 的 CSS 样式 


EEIRS 设置 网 页 固定 宽度 。 为 该 圆 角 框 单独 设置 一 个 ID， 把 针对 它 的 CSS 样式 放 到 这 
个 的 样式 定义 部 分 。 设 置 margin 实现 在 页 面 中 居中 ， 并 用 width 属性 确定 固定 宽 
度 ， 代 码 如 下 : 


#header { 
margin:0 auto; 
width:760px;} 




















Fa 这 个 宽度 不 要 设置 在 与 rounded 相关 的 CSS 样式 中 ， 因 为 该 样式 会 被 页 面 中 


法。 的 各 个 部 分 公用 ， 如 果 设置 了 固定 宽度 ， 其 他 部 分 就 不 能 正确 显示 了 。 
另外 ， 在 HIML 部 分 的 <div class="rounded">…</div> 的 外 面 套 一 个 div， 代 码 如 下 : 


<div id="header"> 

<div class="rounded"> 
<h2> 页 头 </h2> 

<div class="main"> 

<p> 

钢 禾 日 当 午 ， 汗 滴 条 下士 <br/> 
钢 禾 日 当 午 ， 汗 滴 禾 下 士 </p> 
</div> 

<div class="footer"> 
<p></p> 

</div> 


</div> 
</div> 


在 正 11.0 浏览 器 中 的 浏览 效果 如 图 11-22 所 示 。 
EEC 设置 其 他 圆 角 矩形 框 。 将 放置 的 圆 角 和 矩形 框 再 复制 出 两 个 ， 并 分 别 设置 ID 为 
content 和 footer， 分 别 代 表 “ 内 容 ” 和 “页 脚 ”。 完 整 的 页 面 框架 代码 如 下 : 


<div id="header"> 
<div class="rounded"> 
<h2> 页 头 </h2> 

<div class="main"> 


<p> 

钢 禾 日 当 午 ， 汗 滴 禾 下 士 <br/> 
钢 禾 日 当 午 ， 汗 滴 禾 下 士 </p> 
</div> 

<div class="footer"> 
<p></p> 

</div> 

</div> 

</div> 

<div id="content"> 
<div class="rounded"> 
<h2> 正 文 </h2> 

<div class="main"> 


<p> 

铀 禾 日 当 午 ， 汗 滴 禾 下 土 <br /> 
铀 禾 日 当 午 ， 汗 滴 禾 下 土 </p> 
</div> 

<div class="footer"> 
<p> 

查看 详细 信息 &gt; &gt; 

</p> 

</div> 

</div> 

</div> 

<div id="pagefooter"> 
<div class="rounded"> 
<h2> 页 脚 </h2> 

<div class="main"> 


<p> 
铀 禾 日 当 午 ， 汗 滴 禾 下 土 </p> 
</div> 

<div class="footer"> 
<p> 

</p> 

</div> 

</div> 

</div> 


修改 CSS 样式 代码 如 下 : 


#header, #pagefooter,#content{ 
margin:0 auto; 
width:760px;} 


从 CSS 代码 中 可 以 看 到 ，3 个 div 的 宽度 都 设置 为 固定 值 760 像素 ， 并 且 通 过 设置 
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margin 的 值 来 实现 居中 放置 ， 即 左右 margin 都 设置 为 auto。 在 正 11.0 浏览 器 中 的 浏览 效果 
如 图 11-23 所 示 。 
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11-22 ”设置 网 页 固定 宽度 11-23 ”添加 其 他 网 页 圆 角 矩形 框 


11.4.2 ”案例 9 一 一 网 页 1-2-1 型 布局 模式 


| | 网 页 1-2-1 型 布局 模式 是 网 页 制作 中 最 常用 的 一 个 模式 ， 其 结构 如 图 11-24 所 示 。 在 布局 

- 结构 中 ， 增 加 了 一 个 side 栏 。 但 是 在 通常 状况 下 ， 两 个 div 只 能 竖 直 排列 。 为 了 让 content 和 

、 | side 能 够 水 平 排列 ， 必 须 把 它们 放 到 另 一 个 div 中 ， 然 后 使 用 浮动 或 者 绝对 定位 的 方法 ， 使 
content 和 side 并 列 起 来 。 


| | se | 





图 11-24 ”网 页 1-2-1 型 布局 模式 示意 图 


制作 网 页 1-2-1 型 布局 的 操作 步骤 如 下 。 

EEC 修改 网 页 单列 布局 的 结果 代码 。 这 一 步 用 上 小 节 完 成 的 结果 作为 素材 ， 在 
HTML 中 把 content 部 分 复制 出 一 个 新 的 ， 这 个 新 的 ID 设置 为 side， 然 后 在 它们 的 
外 面 套 一 个 div， 命 名 为 container， 修 改 部 分 的 框架 代码 如 下 : 


<div id="container"> 
<div id="content"> 
<div class="rounded"> 
<h2> 正 文 1</h2> 

<div class="main"> 


<p> 

钢 禾 日 当 午 ， 汗 滴 禾 下 土 <pr /> 
铀 禾 日 当 午 ， 汗 滴 禾 下 土 </p> 
</div> 

<div class="footer"> 

<p> 

查看 详细 信息 &gt; sgt; 

</p> 

</div> 
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</div> 

</div> 

<div id="side"> 

<div class="rounded"> 
<h2> 正 文 2</h2> 

<div class="main"> 


<p> 

钢 禾 日 当 午 ， 汗 滴 禾 下 士 <br /> 
钢 禾 日 当 午 ， 汗 滴 禾 下 士 </p> 
</div> 

<div class="footer"> 


<p> 
查看 详细 信息 &gt; &gt; 
</p> 

</div> 

</div> 

</div> 

</div> 


修改 CSS 样式 代码 如 下 : 


#header, #pagefooter,#container{ 
margin:0 auto; 

width:760px;} 

#content{} 

#side{} 


从 上 述 代 码 中 可 以 看 出 ，#container 、#header 、#pagefooter 并 列 使 用 相同 的 样式 ， 
#content、#side 的 样式 暂时 先 空 着 ， 这 时 的 效果 如 图 11-25 所 示 。 
EEC 实现 正文 1 与 正文 2 的 并 列 排列 ， 这 里 用 两 种 方法 来 实现 。 首 先 使 用 绝对 定位 
法 来 实现 ， 有 具体 的 代码 如 下 : 


#header, #pagefooter,#container{ 
margin:0 auto; 
width:760px;} 
#container{ 
position:relative; } 
#content{ 
position:absolute; 
top:0s 

left:0; 

width:500px; 

上 

#side{ 

margin:0 0 0 500px; 
i; 


在 上 述 代码 中 ， 为 了 使 #content 能 够 使 用 绝对 定位 ， 必 须 考虑 用 哪个 元 素 作为 它 的 定位 基 
准 。 显 然 应 该 是 container 这 个 div。 因 此 将 #container 的 position 属性 设置 为 relative， 使 它 成 
为 下 级 元 素 的 绝对 定位 基准 ， 然 后 将 #content 这 个 div 的 position 设置 为 absolute， 即 绝对 定 
位 ， 这 样 它 就 脱离 了 标准 流 ，#side 就 会 向 上 移动 占据 原来 #content 所 在 的 位 置 。 将 #content 的 
宽度 和 #side 的 左 margin 设置 为 相同 的 数值 ， 就 正好 可 以 保证 它们 并 列 紧 挨 着 放置 ， 且 不 会 相 
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互 重合 。 运 行 结果 如 图 11-26 所 示 。 
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ES 使 用 浮动 法 实现 正文 1 与 正文 2 的 并 列 排 列 。 在 CSS 样式 部 分 ， 稍 作 修 改 ， 加 
入 以 下 样式 代码 : 


#content{ 
float:left; 
width:500px; 
} 

#side{ 
float:left; 
width:260px; 
} 


运行 结果 如 图 11-27 所 示 。 


、 图 11-25 ”修改 网 页 单列 布局 样式 图 11-26 使 用 绝对 定位 的 效果 
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图 11-27 ”使 用 浮动 定位 的 效果 





















rm 使 用 浮动 法 修改 正文 布局 模式 非常 灵活 。 例 如 ， 要 将 side 从 页 面 右 边 移动 到 
人” 左边 ， 即 交换 与 content 的 位 置 ， 只 需要 稍微 修改 一 下 CSS 代码 即 可 实现 ， 代 码 
加 下 : 


#content{ 
float:right; 
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width:500px; 

} 

#side{ float:left; 
width:260px; 

} 


11.4.3 ”案例 10 一 一 网 页 1-3-1 型 布局 模式 
网 页 1-3-1 型 布局 模式 也 是 网 页 制作 中 最 常用 的 模式 ， 模 式 结构 如 图 11-28 所 示 。 














图 11-28 网 页 1-3-1 型 布局 模式 示意 图 


这 里 使 用 浮动 方式 来 排列 横向 并 排 的 3 栏 ， 制 作 过 程 与 “1-1-1” 到 “1-2-1” 布 局 转换 一 
样 ， 只 需 控 制 好 夫 eft、#content、#side 这 3 栏 都 使 用 浮动 方式 ，3 列 的 宽度 之 和 正好 等 于 总 宽 
度 。 具 体 过 程 不 再 详 述 ， 制 作 完 之 后 的 代码 如 下 : 


<!DOCTYPE html> 

<head> 

<title>1-3-1 固定 宽度 布局 </title> 
<style type="text/css"> 

body { 

background: #FFF; 

font: 14px 宋体 ; 

margin:07 

padding:0; 

. 
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.rounded { 
background: url (images/left-top.gif) top left no-repeat; 
width:100%; 
} 
-rounded h2 { 
background: 
url (images/right-top.gif) 
top right no-repeat; 
padding:20px 20px 10px; 
margin:07 


} 
.rounded .main { 
background: 
url (images/right .gif) 
top right repeat-y; 
padding:10px 20px; 
margin:-20px 0 0 0; 
} 
.rounded .footer { 
background: 
url (images/left-bottom.gif) 
bottom left no-repeat; 


} 
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-rounded .footer p { 
Color:red; 
text-align:right; 
background:url (images/right-bottom.gif) bottom right no-repeat; 
display:block; 
padding:10px 20px 20px; 
margin:-20px 0 0 0; 
font:0/0; 
} 
#header, #pagefooter,#container{ 
margin:0 auto; 
width:760px;} 
#1left{ 
float:left; 
width:200px; 
} 


#content{ 
float:left; 
width:300px; 
} 

#side{ 
float:left; 
width:260px; 
} 


#pagefooter{ 
clear:both; 
i 
</style> 
</head> 
<body> 
<div id="header"> 
<div class="rounded"> 
<h2> 页 头 </h2> 
<div class="main"> 


<p> 
钢 禾 日 当 午 ， 汗 滴 禾 下 土 <br /> 
钢 禾 日 当 午 ， 汗 滴 禾 下 士 </p> 
</div> 
<div class="footer"> 
<p></p> 
</div> 

</div> 
</div> 


<div id="container"> 
<div id="left"> 
<div class="rounded"> 
<h2> 正 文 </h2> 
<div class="main"> 


<p> 

铺 示 日 当 午 ， 汗 滴 禾 下 土 <br /> 
俩 条 日 当 午 ， 汗 滴 条 下 圭 

fp 


</div> 
<div class="footer"> 


<p> 
查看 详细 信息 &gt; &gt; 


</p> 
</div> 
</div> 
</div> 
<div id="content"> 
<div class="rounded"> 
<h2> 正 文 1</h2> 
<div class="main"> 


<p> 
铺 禾 日 当 午 ， 汗 滴 禾 下 土 <br /> 
钢 丰 日 当 午 ， 汗 滴 条 下 十 
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</p> 利 
</div> 外 
<div class="footer"> 
<p> O 
查看 详细 信息 &gt; ggt; vn 
</p> 0 
</div> 局 、 
</div> 网 
</div> 页 


<div id="side"> 
<div class="rounded"> 
<h2> 正 文 2</h2> 
<div class="main"> 


<p> 

钢 禾 日 当 午 ， 汗 滴 禾 下 土 <br /> 
钢 禾 日 当 午 ， 汗 滴 禾 下 土 

</p> 

</div> 

<div class="footer"> 


<p> 
查看 详细 信息 &gt ?&gt; 
</p> 
</div> 
</div> 
</div> 
</div> 
<div id="pagefooter"> 
<div class="rounded"> 
<h2> 页 脚 </h2> 
<div class="main"> 


<p> 

钢 禾 日 当 午 ， 汗 滴 禾 下 土 
</p> 

</div> 

<div class="footer"> 
<p> 





</p> 
</div> 
</div> 
</div> 
</body> 
</html> 


在 正 11.0 浏 览 器 中 的 浏览 效果 如 图 11-29 所 示 。 
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11-29 网 页 1-3-1 型 布局 模式 


11.5 ”综合 案例 一 一 创建 左右 布局 页 面 


一 个 美观 大 方 的 页 面 ， 必 然 是 一 个 布局 合理 的 页 面 。 左 右 布局 是 网 页 中 比较 常见 的 一 种 
方式 ， 即 根据 信息 种 类 不 同 ， 将 信息 分 别 在 当前 页 面 左 右 侧 显示 。 本 案例 将 利用 前 面 学 过 的 
知识 ， 创 建 一 个 左右 布局 的 页 面 。 

有 具体 操作 步骤 如 下 。 

分 析 需 求 。 

首先 需要 将 整个 页 面 分 为 左右 两 个 模块 ， 左 模块 放置 一 类 信息 ， 右 模块 放置 一 类 信息 。 
可 以 设 定 其 宽度 和 高 度 。 

创建 HTML 页 面 ， 实 现 基本 列表 。 

创建 HTML 页 面 ， 同 时 用 Div 在 页 面 中 划分 左边 Div 层 和 右边 Div 层 两 个 区 域 ， 并 且 将 
信息 放 入 相应 的 Div 层 中 ， 注 意 Div 层 内 引用 CSS 样式 名 称 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 布 局 </title> 
</head> 
<body> 
<center> 
<div class="big"> 
<p class=pp> 女 性 </p> 
<div class="]left"> 
<h1> 女 性 </h1> 
<p> 。 女 性 养生 : 让 女性 皮肤 快 衰老 的 5 个 原因 19:18 </p> 
<p> “六 类 食物 能 有 效 对 抗 紫外 线 11:15 </p> 
<p> 。 打 造 夏美 人 受 oL 追捧 的 清爽 发 型 10:05 </p> 
<p> 。 美 丽 帮 帮 忙 : 别 让 大 油 脸 吓 跑 男人 09:47 </p> 
<p> “简约 雪 纺 清凉 衫 百 元 搭 出 欧美 范 儿 14:51 </p> 
<p> 。 花边 连衣裙 超 包 人 7 月 穿 搭 出 新 意 11:04 </p> 


</div> 


<div class="right"> 
<h1> 健 康 </h1> 癌 
<p> 。 女 性 养生 : 让 女人 老 得 快 的 10 个 原因 19:18 </p> 
<p> 。 养 生 盘点 : 喝 豆浆 的 九 大 好 处 和 七 大 禁忌 09:14</p> 架 
<p> 。 养 生 警 惕 : 14 个 护肤 心理 “ 错 ” 觉 19:57</p> 构 
<p> 。 柿 子 番茄 骨 汤 8 种 营养 师 最 爱 的 食物 15:16</p> m 
<p> 。 夏 季 养 生 指南 : “夫妻 菜 ” 宜 常 吃 10:48 </p> 大 
<p> 。10 条 食疗 养生 方法 ， 居 家 宅 人 的 养生 经 13:54 </p> 此 





</div> 
</div> 
</center> 
利 
</body> 用 
</html> 号 
十 
在 下 11.0 浏览 器 中 的 浏览 效果 如 图 11-30 所 示 ， 可 以 看 到 页 面 显示 了 两 个 模块 ， 分 别 是 。 @ ， 
“女性 ”和 “健康 ”， 二 者 上 下 排列 。 NS 
四 于 BY 添加 CSS 代码， 修饰 整体 样式 和 Div 层 。 局 
<style> 页 
| 
padding:0px; 
margin:0px; 
}body { 
font : "宋体 "7 
font-size:18px; 
} 
.big{ 
width:570px; 
height:210px; 
border:#C1C4CD lpx solid; 
上 
</style> 


在 正 11.0 浏览 器 中 的 浏览 效果 如 图 11-31 所 示 ， 可 以 看 到 页 面 比 原来 字体 变 小 ， 并 且 大 
的 Div 显示 了 边框 。 





















= 日 区 
[ ox 司 Ceerdiangu\Desaop 守 | P -上 局 二 ] 
| 加 cueersaiangwDesktopa 呈 sm PC | 总 局 x . 
Mn Wah nM me IRID mp 
女性 | 
美丽 
站 性 养生 ， 让 女性 成 肤 快 豪 老 的 3 个 原因 19-18 . 上 给 从 损人 47 
.简约 雪 纺 清流 榜 百 元 搭 出 欧 关 范 儿 14:51 
RN “花边 连 农 补 超 名 人 7 月 穿 接 出 新 意 11:04 
中 六 豆 美人 受 OL 启 搞 的 污 吉 发型 1005 本 
美丽 吉普 从 ， 虽 大 油 腔 吓 区 筋 人 09:47 
i ; 中 豆浆 的 儿 大 好 
"个 的 可 纺 靖 党 衬 百 元 措 出 欧美 范 儿 14.31 - 状 生 警惕 ，14 个 护 对 必 
" 花 廊 连 胡 禄 超 为 人 7 月 军棋 出 新 划 11:04 i 和 Ait 
健康 
rm ~» Row ~ 
11-30 上 下 排列 图 11-31 修饰 整体 样式 
SS 添加 CSS 代码 ， 设 置 两 个 层 左 右 并 列 显 示 。 代 码 如 下 : 


=leftr 
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width:280px; 

float:right; // 设 置 右边 悬浮 
border:#C1C4CD lpx solid; 
ji rightt 

width:280px; 

float :left;// 设 置 左边 悬浮 
margin-left:6px; 
border:#C1C4CD lpx solid; 


在 正 11.0 浏览 器 中 的 浏览 效果 如 图 11-32 所 示 ， 可 以 看 到 页 面 中 文本 信息 左右 并 列 显 
示 ， 但 字体 没有 发 生变 化 。 
区 于 BY 添加 Css 代码， 定义 文本 样式 。 代 码 如 下 : 


hli 

font-size:14px; 

padding-left:10px; 

background-color:#CCCCCc; 

height:20px; 

line-height:20px; 

}p{ 

margin:S5px; 

line-height:18px; 
color:#2F17CD; 

}.pp{ 
width:570px; 
text-align:left; 
height:20px; 
background-color:D5E7FD; 
position:relative; 
left:-3px; 
top:-3px; 
font-size:16px; 
text-decoration:underline; 


; 


在 正 11.0 浏览 器 中 的 浏览 效果 如 图 11-33 所 示 ， 可 以 看 到 页 面 中 文本 信息 左右 并 列 显 
， 其 字体 颜色 为 蓝 色 ， 行 高 为 18 像素 。 
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女性 养生 ; 让 女性 支 肤 快 这 老 的 ?个 局 四 1918 健康 女性 
ea Sn cs 人 志 再 届 910 个 原因 15:18 性 桨 二 :让 人 性 洁 愤 他 认 才 的 5 个 奈 鸯 0:18 
i 大 好 处 和 大 芝 忌 00414 5 
| 人 关 生 攻 局: 14 护 扶 理 读 - 这 1937 -过 页 美 人 现 0L 沁 排 的 表现 发 型 1045 
地 二 革 厅 吕 芝 亲生 和 的 让 区 1514 闫 而 入 ; 别 让 大 法 队 T 间 加 人 09.47 
宇和 接 启 : la 滑 的 起 于 训 实 百 元 省 Ri 半 革 儿 1431 
全 放 关 入 法 ， 呈 守 志 人 的 养生 134 和] 月 这 扩 出 全 1:04 
11-32 ”设置 左 、 右 悬浮 图 11-33 文本 修饰 样式 


11.6 疑难 解 惑 


疑问 1: 自动 缩放 网 页 布局 中 网 页 框架 百分比 的 关系 是 什么 ? 


答 : 框架 中 百分比 的 关系 ， 对 这 个 问题 ， 初 学 者 往往 比较 困惑 ， 以 11.1.1 中 样式 做 个 说 
明 ，container 等 外 层 div 的 宽度 设置 为 85% 是 相对 浏览 器 窗口 而 言 的 比例 ， 而 后 面 content 和 
side 这 两 个 内 层 div 的 比例 是 相对 于 外 层 div 而 言 的 。 这 里 分 别 设置 为 66% 和 33%， 二 者 相 
加 为 99%， 而 不 是 100%， 这 是 为 了 避免 由 于 舍 入 误差 造成 总 宽度 大 于 它们 容器 的 宽度 ， 而 使 
某 个 div 被 挤 到 下 一 行 中 ， 如 果 希 望 精确 ， 写 成 99% 也 可 以 。 

疑问 2: Div 层 高 度 设 置 好 还 是 不 设置 好 ? 

答 : 在 下 浏览 器 中 ， 如 果 设置 了 高 度 值 ， 但 是 内 容 很 多 ， 会 超出 所 设置 的 高 度 ， 这 时 浏 
览 器 就 会 自己 撑 开 高 度 ， 以 达到 显示 全 部 内 容 的 效果 ， 不 受 所 设置 的 高 度 值 限 制 。 而 在 
Firefox 浏览 器 中 ， 如 果 设 置 了 高 度 值 ， 那 么 容器 的 高 度 就 会 被 固定 住 ， 就 算 内 容 再 多 ， 也 不 
会 被 撑 开 ， 但 还 会 显示 全 部 内 容 ， 只 是 如 果 容 器 下 面 还 有 内 容 的 话 ， 那 么 这 一 块 就 会 与 下 一 
块 内 容重 合 。 

这 个 问题 的 解决 办 法 就 是 ， 不 要 设置 高 度 值 ， 这 样 浏览 器 就 会 根据 内 容 自 动 判断 高 度 ， 
也 不 会 出 现 内 容重 合 的 现象 。 


着 到 加 计 SSO +AId 酒 尝 一 一 装 葡 洁 否 洁 井 煤 贡 中 小 人 鲁 
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第 12 章 
动态 网 站 开发 语言 


基础 一 一 认 
PHP 语言 





要 想 自己 动手 建立 网 站 ， 掌 握 一 门 网 页 编程 语言 是 必需 的 。 众 所 周知 ， 无 论 多 
介绍 PHP 语言 网 页 编程 常用 知 


外 2 


么 绚丽 的 网 页 ， 都 要 由 语言 编程 去 实现 。 本 章 主要 
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12.1 PHP 基本 知识 


PHP(Personal Home Page) 是 一 种 创建 动态 交互 性 站 点 的 强 有 力 的 服务 器 端 脚本 语言 ， 
且 是 免费 的 ， 因 此 使 用 广泛 。 


12.1.1 PHP 的 概念 


PHP 是 一 种 在 服务 器 端 执 行 的 嵌入 HTML 文档 的 脚本 语言 ， 语 言 风格 类 似 于 C 语言 ， 被 
广泛 运用 于 动态 网 站 的 制作 中 。PHP 语言 借鉴 了 C 和 Java 等 语言 的 部 分 语法 ， 并 有 自己 的 特 
性 ， 使 Web 开发 者 能 够 快速 地 编写 动态 生成 页 面 的 脚本 。 对 于 初学 者 而 言 ，PHP 的 优势 是 可 
以 快速 入 门 。 

与 其 他 的 编程 语言 相 比 ，PHP 是 将 程序 嵌入 到 HTML 文档 中 去 执行 ， 执 行 效率 比 完全 生 
成 HTML 标记 的 方式 要 高 许多 。PHP 还 可 以 执行 编译 后 的 代码 ， 编 译 可 以 达到 加 密 和 优化 代 
码 运行 的 作用 ， 使 代码 运行 得 更 快 。 另 外 ，PHP 具有 非常 强大 的 功能 ， 所 有 的 CGI 的 功能 
PHP 都 能 实现 ， 而 且 支持 几乎 所 有 流行 的 数据 库 以 及 操作 系统 。 最 重要 的 是 ，PHP 还 可 以 用 
C、C++ 进 行程 序 的 扩展 。 


12.1.2 PHP 语言 的 优势 


PHP 能 够 迅速 发 展 ， 并 得 到 广大 使 用 者 的 喜爱 ， 主 要 原因 是 PHP 不 仅 有 一 般 脚 本 所 具有 
的 功能 ， 而 且 还 有 其 自身 的 优势 。 具 体 特点 如 下 。 

(1) 源 代码 完全 开放 。 所 有 的 PHP 源 代码 事实 上 都 可 以 得 到 。 读 者 可 以 通过 Internet 获得 
需要 的 源 代码 ， 快 速 修改 利用 。 

(2) 完全 免费 。 和 其 他 技术 相 比 ，PHP 本 身 是 免费 的 。 读 者 使 用 PHP 进行 Web 开发 无 须 
支付 任何 费用 。 

(3) 语法 结构 简单 。 因 为 PHP 结合 了 C 语言 和 Perl 语言 的 特色 ， 编 写 简单 ， 方 便 易 懂 。 
可 以 被 嵌入 于 HTML 语言 ， 它 相对 于 其 他 语言 ， 编 辑 简单 ， 实 用 性 强 ， 更 适合 初学 者 。 

(4) 跨 平台 性 强 。 由 于 PHP 是 运行 在 服务 器 端的 脚本 ， 可 以 运行 在 UNIX、Linux、 
Windows 下 。 

(5) 效率 高 。PHP 消耗 相当 少 的 系统 资源 ， 并 且 程 序 开发 快 、 运 行 快 。 

(6) 强大 的 数据 库 支持 。 支 持 目前 所 有 的 主流 和 非 主流 数据 库 ， 使 PHP 的 应 用 对 象 非常 

广汉 s 

(7) 面向 对 象 。 从 PHP5.5 开始 ， 面 向 对 象 方面 都 有 了 很 大 的 改进 ， 现 在 PHP 完全 可 以 用 
来 开发 大 型 商业 程序 。 


12.2 ”PHP 中 的 数据 类 型 


从 PHP4 开始 ，PHP 中 的 数据 类 型 不 再 需要 事先 声明 ， 不 同 的 数据 类 型 其 实 就 是 所 储存 
数据 的 不 同 种 类 ，PHP 的 数据 类 型 主要 包括 字符 串 、 整 数 、 浮 点 数 、 逻 辑 、 数 组 、 对 象 、 
NULL。 


12.2.1 整 型 


整 型 (integers) 是 数据 类 型 中 最 基本 的 类 型 。 在 现 有 的 32 位 运算 器 的 情况 下 ， 整 型 的 取 值 
是 从 -2147483648 到 +2147483647 之 间 。 整 型 可 以 表示 为 十 进 制 、 十 六 进 制 和 八进制 。 使 用 
PHP var_dump() 会 返回 变量 的 数据 类 型 和 值 。 

例如 : 


3560 // 十 进 制 整数 
01223 ”// 八 进 制 整数 
0x1223 // 十 六 进 制 整数 


12.2.2” 浮 点 型 


浮 点 型 (floating-poinb 表 示 实 数 。 在 大 多 数 运行 平台 下 ， 这 个 数据 类 型 的 大 小 为 8 字 节 。 
它 的 近似 取 值 范围 是 2.2E-308 一 1.8E+308( 科 学 记 数 法 )。 
例如 : 


-1.432 
1E+07 
0.0 


12.2.3 布尔 值 


布尔 值 (boolean) 只 有 两 个 值 ， 即 true 和 false。 布 尔 值 是 十 分 有 用 的 数据 类 型 ， 通 过 它 ， 
程序 实现 了 逻辑 判断 的 功能 。 

而 对 于 其 他 的 数据 类 型 ， 基 本 都 有 布尔 属性 。 

(1) 整 型 ， 为 0 时 ， 其 布尔 属性 为 false; 为 非 零 值 时 ， 其 布尔 属性 为 tue。 

(2) 浮 点 型 ,为 0.0 时 ， 其 布尔 属性 为 false; 为 非 零 值 时 ， 其 布尔 属性 为 tue。 

(3) 字符 串 型 ， 空 字符 串 ""， 或 者 零 字 符 串 "0" 时 ， 为 false; 包含 除 此 以 外 的 字符 串 时 为 
true。 

(4) 数组 型 ， 若 不 含 任何 元 素 ， 为 false; 只 要 包含 元 素 ， 则 为 tue。 

(5) 对 象 型 ， 资 源 型 ， 永 远 为 tue。 

(6) 空 型 ， 则 永远 为 false。 


下 广 dHd 范 丑 一 一 宫 峙 趾 广 汪 瘦 卉 到 讲 蔷 “ 山 Z| 名 重 
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12.2.4 字符 串 型 


字符 串 型 的 数据 是 表示 在 引号 之 间 的 。 引 号 分 为 "( 双 引 号 ) 和 ''( 单 引号 )。 这 两 种 引号 都 可 
以 表示 字符 串 ， 但 是 这 两 种 表示 也 有 一 定 区 别 。 双 引号 几乎 可 以 包含 所 有 的 字符 ， 但 是 在 其 
中 的 变量 显示 的 是 变量 的 值 ， 而 不 是 变量 的 变量 名 。 单 引号 内 的 字符 是 被 直接 表示 出 来 的 。 

下 面 通过 一 个 案例 ， 来 讲述 上 面 几 种 数据 类 型 的 使 用 方法 和 技巧 。 

【 例 12-1】 常用 数据 类 型 的 使 用 方法 (实例 文件 为 ch12\12.1.php)。 


<HTML> 
<HEAD> 
<TITLE> 变 量 的 类 型 </TITLE> 
</HEAD> 
<BODY> 
<?php 
$intl= 2012; 
$int2= 01223; // 八 进 制 整 数 
$int3=0x1223; // 十 六 进 制 整数 
echo "输出 整数 类 型 的 值 : "; 
echo $intl; 
echo ™\E™y // 输 出 一 个 制 表 符 
echo $int2; // 输 出 659 
echo "\t"; 
echo $int3; // 输 出 4643 
echo "<br>"; 
$floatl=54.66; 
echo $floatl; // 输 出 54.66 
echo "<br>"; 
echo "输出 布尔 型 变量 : "; © i 生生 
echo (Boolean) ( RE | 二 区 ET ed 
// 将 intl 整 型 转化 为 布尔 变量 村 出 几 寺 天 型 的 值 ，2012 659 4643 
echo "<br>"; 
$stringl=" 字 符 串 类 型 的 变量 "; a 
echo $stringl; 
2 
</BODY> 


< 图 12-1 例 12-1 的 程序 运行 结果 
本 程序 运行 结果 如 图 12-1 所 示 。 


12.2.5 ”数组 型 


数组 是 PHP 变量 的 集合 ， 它 是 按照 “ 键 值 ” 与 “ 值 ” 对 应 的 关系 组 织 数据 的 ， 数 组 的 键 
值 可 以 是 整数 也 可 以 是 字符 串 。 默 认 情况 下 ， 数 组 元 素 的 键 值 为 从 零 开始 的 整数 。 

在 PHP 中 ， 使 用 list0 函 数 或 array0 函 数 来 创建 数组 ， 也 可 以 直接 进行 赋值 。 

【 例 12-2】 使 用 array0 函 数 创建 数组 (实例 文件 为 ch12\12.2.php)。 


<HTML> 
<HEAD> 
<TITLE> 数 组 变量 </TITLE> 

















信 256 


</HEAD> 
<BODY> 
<?php 
$arr=array (15,1E+05, "秋风 吹 不 尽 ， 总 是 玉 关 情 。") ; 


for ($i=0;$i<3;$i++) 


{ - oO x 
echo "$arr[$i]<br>"; OT Eo Ose 
i 文件 (有 稀 名 (5) 查看 VV) 站 区 夫人 A) 工具 (T) 帮助 (H) 
5 
全 00000 
</BODY> 秋风 吹 不 尽 ， 剖 是 玉 关 情 。 
</HTML> 





本 程序 运行 结果 如 图 12-2 所 示 。 从 上 述 代码 中 可 
以 看 出 本 程序 采用 for 循环 语句 输出 整个 数组 ，echo0 函 图 12-2 例 12-2 的 程序 运行 结果 
数 返回 当前 数组 指针 的 索引 值 。 


12.2.6 ”对 象 型 


对 象 是 存储 数据 和 有 关 如 何 处 理 数据 信息 的 数据 类 型 。 在 PHP 中 ， 必 须 明确 地 声明 对 
象 ， 首 先 必须 声明 对 象 的 类 ， 声 明 应 使 用 class 关键 词 ， 类 是 包含 属性 和 方法 的 结构 ， 然 后 在 
对 象 类 中 定义 数据 类 型 ， 这 样 就 可 以 在 该 类 的 实例 中 使 用 此 数据 类 型 了 。 





下 末 dHd 落 乏 一 一 主 册 中 六 赴 书 基 悦 寻 起 几 Z 小 侠 


12.2.7 NULL 型 


Null 类 型 是 仅 拥有 NULL 这 一 个 值 的 类 型 。 这 个 类 型 是 用 来 标记 一 个 变量 为 空 的 。 一 个 
空 字符 串 与 一 个 NULL 是 不 同 的 。 在 数据 库存 储 时 会 把 空 字 符 串 和 NULL 区 分 开 处 理 。 
NULL 型 在 布尔 判断 时 永远 为 包 lse。 很 多 情况 下 ， 在 声明 一 个 变量 的 时 候 可 以 直接 先 赋值 为 
Null( 空 ) 型 ， 如 $value = NULL。 


12.2.8 ”数据 类 型 转换 


数据 从 一 个 类 型 转换 到 另 一 个 类 型 ， 就 是 数据 类 型 转换 。 在 PHP 语言 中 ， 有 两 种 常见 的 
转换 方式 ， 即 自动 数据 类 型 转换 和 强制 数据 类 型 转换 。 


1. 自动 数据 类 型 转换 


这 种 转换 方法 最 为 常用 ， 直 接 输 入 数据 的 转换 类 型 即 可 。 例 如 ，Float 型 转换 为 整数 Int 
型 ,小数点 后 面 的 数 将 被 舍弃 。 如 果 Float 数 超过 了 整数 的 取 值 范 围 ， 则 结果 可 能 是 0 或 者 整 
数 的 最 小 负数 。 

【 例 12-3】 自 动 数据 类 型 转换 (实例 文件 为 ch12\12.3.php)。 

<HTML> 

<HEAD> 

<TITLE> 自 动 数 据 类 型 转换 </TITLE> 
</HEAD> 
<BODY> 
<?php 
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S$flol=1.867 
echo (int)$flol."<br>"; 


一 口 X 
$f102=4E32; // 超 过 整数 取 值 范围 Eo rm so Gens 


echo (int) $f102; 文件 (月 ”六 纺 (E) 查看 (V) 收藏 失 (A) 工具 MT 者 助 (H) 
2 1 
</BODY> 
</HTML> 


本 程序 运行 结果 如 图 12-3 所 示 。 
2. 强制 数据 类 型 转换 
在 PHP 中 ， 可 以 使 用 setType0 函 数 强制 转换 数据 类 型 。 基 本 语法 格式 如 下 : 


Bool setType (var,string type) 


【 例 12-4】 强 制 数据 类 型 转换 (实例 文件 为 ch12\12.4.php)。 


<HTML> 
<HEAD> 

<TITLE> 强 制 数 据 类 型 转换 </TITLE> SE 
</HEAD> @ Eo po [Game 
<BODY> 文件 由 妃 久 (E) 至 看 V) 收藏 史 A) 工具 (T 孝 彻 HH) 


<?php 1 











12-3” 例 12-3 的 程序 运行 结果 











$f1l01=1 .86; 
echo setType ($flol,"int"); 
2 
</BODY> 
</HTML> 图 12-4 例 12-4 的 程序 运行 结果 


本 程序 运行 结果 如 图 12-4 所 示 。 
12.3 PHP 中 的 常量 与 变量 


在 PHP 中 ， 常 量 是 一 旦 声明 就 无 法 改变 的 值 。 变 量 像 是 一 个 贴 有 名 字 标 签 的 空 盒子 。 不 





同 的 变量 类 型 对 应 不 同 种 类 的 数据 ， 就 像 不 同 种 类 的 东西 要 放 入 不 同 种 类 的 盒子 。 
12.3.1 案例 1 一 一 声明 和 使 用 常量 


PHP 通过 define() 函 数 来 声明 常量 。 格 式 如 下 : 
define ("常量 名 "， 常 量 值 ) ; 
常量 名 是 一 个 字符 串 ， 通 常 在 PHP 编码 规范 的 指导 下 使 用 大 写 的 英文 字符 表示 ， 如 


CLASS_NAME、MYAGE 等 。 


常量 值 可 以 是 很 多 种 PHP 的 数据 类 型 ， 可 以 是 数组 ， 也 可 以 是 对 象 ， 当 然 还 可 以 是 字符 


和 数字 。 


【 例 12-5】 声 明 与 使 用 常量 (实例 文件 为 ch12\12.5.php)。 


<HTML> 
<HEAD> 














<TITLE> 自 定义 变量 </TITLE> 2 
</HEAD> 章 
<BODY> 
<?php 动 

define ("HUANY"," 花 间 一 壶 酒 ， 独 酮 无 相亲 。 举 杯 邀 明月 ， 对 影 成 三 人 。 月 既 不 解 饮 ， 影 徒 随 ” 态 
我 身 。 暂 伴 月 将 影 ， 行 乐 须 及 春 。 我 歌 月 徘徊 ， 我 舞 影 零乱 。 醒 时 同 交欢 ， 醉 后 各 分 散 。 永 结 无 情 如 
游 ， 相 期 避 云 汉 。") ; 开 

echo HUANY; 发 
2 [@@- rpiecshe P- 6 Di 一 硬 加 
CD 文 4 有 日 “MIRm DH) 基 
敬 站 一 过 酒 ， 独 的 无 相亲 。 举 杯 籽 明 月 ， 对 影 成 三 人 。 月 区 不 妇 | 而 

Pl 
本 程序 运行 结果 如 图 12-5 所 示 。 影 王 让。 可 时 同 交 欢 ， 本 局 各 分 堵 。 永 结 无 情 游 ， 相 央 志 汉 。 | 
eg 次 
省 注 常量 只 能 储存 布尔 型 、 整 型 、 浮 点 卫 
变型 和 字符 串 数据 。 图 12-5 例 12-5 的 程序 运行 结果 语 


12.3.2 ”案例 2 一 一 声明 与 使 用 变量 


PHP 中 的 变量 一 般 以 “$” 作 为 前 级 ， 然 后 以 字母 a~z 的 大 小 写 或 者 “_ ”下 画 线 开头 。 
这 是 变量 的 一 般 表 示 。 
合法 的 变量 名 可 以 是 : 


$hello 
$Aforml 
$_formhandler (类 似 见 过 的 $_PosT 等 ) 


非法 的 变量 名 如 : 


$168 
$!like 


一 般 的 变量 表示 很 容易 理解 ， 但 是 有 两 个 变量 表示 概念 则 容易 混淆 ， 这 就 是 可 变 变 量 和 
变量 的 引用 。 下 面 通过 例子 对 它们 进行 学 习 。 
【 例 12-6】 声 明 与 使 用 变量 (实例 文件 为 ch12\12.6.php)。 


<HTML> 
<HEAD> 
<TITLE> 系 统 变 量 </TITLE> 
</HEAD> 
<BODY> 
<?php 
$value0 = "guest"; 
$$value0 = "customer"; 
echo $guest."<br />"; 
$guest = "feifei"™; 
echo $guest."\t".$$value0."<br />"; 
$valuel = "xiaoming"; 
$value2 = &$valuel; 
echo $valuel."\t".$value2."<br />"; 
$value2 = "lili™; 
echo $valuel."\t".$value2; 
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2> 














</BODY> - oO x 

</HTML> | 由 -| 仿 ap//ocalho.. P -上 | @ inxs 
G: 匆 铝 (E) ”查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 

本 程序 运行 结果 如 图 12-6 所 示 。 


feifei feifei 
xiaoming xiaoming 
lili 1ili 





Customer 





变量 作用 域 (variable scope)， 是 指 特定 变量 在 图 12-6 例 12-6 的 程序 运行 结果 
代码 中 可 以 被 访问 到 的 位 置 。 在 PHP 中 有 6 种 基 


NN 本 的 变量 作用 域 法 则 。 
(1) 内 置 超 全 局 变量 (Built-in superglobal variables)， 在 代码 中 的 任意 位 置 都 可 以 访问 


得 到 。 

(2) 常数 (constants)， 一 旦 声明 ， 它 就 是 全 局 性 的 ， 可 以 在 函数 内 外 使 用 。 

(3) 全 局 变量 (global variables)， 在 代码 间 声 明 ， 可 在 代码 间 访 问 ， 但 是 不 能 在 函数 内 
访问 。 

(4) 在 函数 中 声明 为 全 局 变量 的 变量 ， 就 是 同名 的 全 局 变量 。 

(5) 在 函数 中 创建 和 声明 为 静态 变量 的 变量 ， 在 函数 外 是 无 法 访问 的 。 但 是 这 个 静态 变 
量 的 值 是 可 以 保留 的 。 

(6) 在 函数 中 创建 和 声明 的 局 部 变量 ， 在 函数 外 是 无 法 访问 的 ， 并 且 在 本 函数 终止 时 
退出 。 

1. 全 局 变量 


全 局 变量 其 实 就 是 在 函数 外 声明 的 变量 ， 在 代码 间 都 可 以 访问 ， 但 是 在 函数 内 是 不 能 访 
问 的 ， 这 是 因为 函数 默认 就 不 能 访问 在 其 外 部 的 全 局 变量 ， 以 下 案例 介绍 全 局 变量 的 使 用 方 
法 和 技巧 。 

【 例 12-7】 全 局 变量 的 使 用 (实例 文件 为 ch12\12.7.php)。 


<HTML> 
<HEAD> 
<TITLE> 全 局 变量 </TITLE> 
</HEAD> 
<BODY> 
<?php 
$room = 20; 
function showrooms(){ 
echo $room; 
} 
showrooms (); 
echo $room.' 间 房间 。'; 
2 
</BODY> 
</HTML> 


本 程序 运行 结果 如 图 12-7 所 示 。 
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2. 静态 变量 


静态 变量 只 是 在 函数 内 存在 ， 函 数 外 无 法 访问 。 但 是 执行 后 ， 其 值 保留 。 也 就 是 说 ， 这 
一 次 执行 完毕 后 ， 这 个 静态 变量 的 值 保留 ， 下 一 次 再 执行 此 函数 ， 这 个 值 还 可 以 调用 。 

通过 下 面 的 实例 介绍 静态 变量 的 使 用 方法 和 技巧 。 

【 例 12-8】 静态 变量 的 使 用 (实例 文件 为 ch12\12.8.php)。 


<HTML> 
<HEAD> 
<TITLE> 静 态 变量 </TITLE> 
</HEAD> 
<BODY> 
<?php 
$person = 20; 
function showpeople(){ 
static $person = 5; 
$persont+; 
echo ' 此 时 静态 变量 的 值 为 : '.$person.' <br />'; 
} 
showpeople () 7 
echo $person.， 为 变量 的 值 <br />'; 
showpeople () 7 
全 
</BODY> 
</HTML> 


本 程序 运行 结果 如 图 12-8 所 示 。 





- O x 
@ 转 - @ hp/ocalho.. 亡 - C | 加 标志 过量 
文件 (篇 纺 (二 看 V) 收藏 (A) 工具 (帮助 (H) 


- 0O x 
由- 加 htpi//localho.. P - © | @ R= 
文件 (F]。 篇 句 (E) 查看 (V) 收藏 闪 (A) 工具 (T) 帮助 (H) 





























20 间 房间 。 | 此 时 静态 变量 的 值 为 ， 6 
20 为 变量 的 值 
此 时 毅 坟 变量 的 值 为 ， 7 
12-7 ” 例 12-7 的 程序 运行 结果 图 12-8 例 12-8 的 程序 运行 结果 


12.4 ”PHP 中 的 运算 符 


PHP 包含 3 种 类 型 的 运算 符 ， 即 一 元 运算 符 、 二 元 运算 符 和 三 元 运算 符 。 一 元 运算 符 用 
在 一 个 操作 数 之 前 ， 二 元 运算 符 用 在 两 个 操作 数 之 间 ， 三 元 运算 符 是 作用 在 3 个 操作 数 
之 间 。 


12.4.1 案例 4 一 一 算术 运算 符 
算术 运算 符 是 最 简单 ， 也 是 最 常用 的 运算 符 。 常 见 的 算术 运算 符 如 表 12-1 所 示 。 





下 泣 dHd 范 丑 一 一 宫 膨 趾 广 汪 瘦 卉 到 潮 蔷 才 2 名 他 
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表 12-1 算术 运算 符 


加 法 运算 
减法 运算 
乘法 运算 
除法 运算 
取 余 法 运算 
累加 运算 
累 减 运算 


【 例 12-9】 算术 运算 符 的 使 用 (实例 文件 为 ch12\12.9.php)。 


<HTML> 

<HEAD> 
<TITLE> 算 术 运 算 符 </TITLE> 

</HEAD> 

<BODY> 

<?php 

$a=13; 
$b=2; 
echo $a."+".$b."="; 
echo $a+$b."<br>"; 
echo $a."—".$b."="; 
echo $a-$b."<br>"; 
echo Sa we 二 mw $bD。"="? 
echo $a*$b."<br>"; 
echo $a."/".$b."="; 
echo $a/$b."<br>"; < 
echo ei ee @ [cE Ty pT Pe 
echo $a%$b."<br>"; 二 
en 久久] 可 看 (V| “收藏 闪 A) 工具 TT) 帮助 H) 
echo $at++."<br>"; 
eC a hehe 
echo $a--."<br>"; 
区 汪 

</BODY> 

</HTML> 


本 程序 运行 结果 如 图 12-9 所 示 。 图 12-9 例 12-9 的 程序 运行 结果 


12.4.2 ”案例 5 一 一 字符 串 运算 符 


字符 串 运 算 符 是 把 两 个 字符 串 连接 起 来 变 成 一 个 字符 串 的 运算 符 。 使 用 “.” 来 完成 。 如 
果 变 量 是 整 型 或 浮 点 型 ，PHP 也 会 自动 把 它们 转换 为 字符 串 输出 。 
【 例 12-10】 字 符 串 运算 符 的 使 用 (实例 文件 为 ch12\12.10.php)。 
<HTML> 
<HEAD> 
<TITLE> 字 符 串 运 算 符 </TITLE> 


</HEAD> 
<BODY> 


























<?2php 
$a = "把 两 个 字符 串 ": 


G2 


站 























= 
有 $a." 连 接 起 来 ，" .$b." 天 。"; © [OE Te 一 章 
</BODY> ME 0 INT 动 
</HTML> 把 两 个 字符 串 连 接 起 来 ，10. 25 天 。 将 
本 程序 运行 结果 如 图 12-10 所 示 。 
公 
12.4.3 ”案例 6 一 一 赋值 运算 符 二 
图 12-10 例 12-10 的 程序 运行 结果 奸 
赋值 运算 符 的 作用 是 把 一 定 的 数据 值 加 载 给 特定 
变量 。 赋 值 运算 符 的 具体 含义 如 表 12-2 所 示 。 认 
表 12-2 ”赋值 运算 符 卫 
o 
运算 符 名 称 语 
= 将 右边 的 值 赋值 给 左边 的 变量 ™ 
二 将 左边 的 值 加 上 右边 的 值 赋 给 左边 的 变量 
一 将 左边 的 值 减 去 右边 的 值 赋 给 左边 的 变量 
bs 将 左边 的 值 乘 以 右边 的 值 赋 给 左边 的 变量 
下 将 左边 的 值 除 以 右边 的 值 赋 给 左边 的 变量 
将 左边 的 字符 串 连 接 到 右边 
%= 将 左边 的 值 对 右边 的 值 取 余 数 赋 给 左边 的 变量 


例如 ，$a-=$b 等 价 于 $a=$a-Sb， 其 他 赋值 运算 符 与 之 类 似 。 从 表 12-2 可 以 看 出 ， 赋 值 运 
算 符 可 以 使 程序 更 加 简练 ， 从 而 提高 执行 效率 。 


12.4.4 ”案例 7 一 一 比较 运算 符 


比较 运算 符 用 来 比较 其 两 端 数据 值 的 大 小 。 比 较 运 算 符 的 具体 含义 如 表 12-3 所 示 。 
表 12-3 ”比较 运算 符 





相等 

不 相等 

大 于 

小 于 

大 于 等 于 

小 于 等 于 
精确 等 于 (类 型 ) 
不 精确 等 于 


其 中 ， 一 = 和 !== 需 要 特别 注意 。$b 一 =$c 表示 $b 和 Sc 不 只 是 数值 上 相等 ， 而 且 两 者 的 类 
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型 也 一 样 ，$b!==$c 表示 $b 和 $c 有 可 能 是 数值 不 等 ， 也 可 能 是 类 型 不 同 。 
【 例 12-11】 比 较 运 算 符 的 使 用 (实例 文件 为 ch12\12.11.php)。 


<HTML> 
<HEAD> 


<TITLE> 使 用 比较 运算 符 </TITLE> 


</HEAD> 

<BODY> 

<?PHP 

$value="15"; 

echo "\$value = \"$value\""; 
echo "$value==15: "; 

Var dump ($value==15); 

// 结 果 为 :bool (true) 
echo "\$value==true: "7 
Var dump ($value==true) 

// 结 果 为 :bool (true) 
echo "\$value!=null: ™; 
Var dump ($value!=null); 

// 结 果 为 :bool (true) 
echo "\$value==false: "7 
Var dump ($value==false); 

// 结 果 为 :bool (false) 
echo "\$value === 15: "7 
Var dump ($value===15) 

// 结 果 为 :bool (false) 
echo "\$value===true: "7 
Var dump ($value===true); 











// 结 果 为 :bool (true) 
eeho ~ (L020 I==35)/e Wy 
var dump (10/2.0 !==5); 

// 结 果 为 :bool (true) 
人 
</BODY> 
<HTML> 


本 程序 运行 结果 如 图 12-11 所 示 。 


[¢ on Tr 
文 从 (| 而 三 (E) 下 看 (V) 站 其 天 (A) 工具 [者 却 (H} 





Svalue = “15715 一 15: 


ap lam:l0keclaan te 
Svalue 一 ture 

Ep iL pg:becleu true 
Svalue !=nu11 

Cp tL sss hecless true 
Svalue==false: 

Emenee) in sie- berlase falee 
Svalve 一 15; 

Ema 1 eee: Vocles Tae 
Svalue=—==true: 

Crm 1 oe:20:beclats false 
(10/2.0 != 5) 

Cp Laa 2.beclen true 








12-11 例 12-11 的 程序 运行 结果 


12.4.5 “案例 8 一 一 递增 递减 运算 符 


PHP 支持 C 风格 的 前 /后 递增 与 递减 运算 符 ， 递 增 /递减 运算 符 不 影响 布尔 值 。 递 减 NULL 


值 没 有 效果 ， 但 是 递增 NULL 值 的 结果 是 1。 递 增 递 减 运算 符 的 具体 含义 如 表 12-4 所 示 。 
表 12-4 ”递增 递减 运算 符 











运算 符 描 述 
++$x Sx 加 1 递增 ， 然 后 返回 $x 
Sx++ 返回 $x， 然后 $x 加 1 递增 
= 和 Sx 减 1 递减 ， 然 后 返回 $x 





Sx—— 





返回 $x， 然后 $x 减 1 递减 


| 





























第 

总 

12.4.6 ”案例 9 一 一 数组 运算 符 训 

动 

PHP 数组 运算 符 用 于 比较 数组 ， 数 组 运算 符 的 具体 含义 如 表 12-5 所 示 。 高 

表 12-5 数组 运算 符 大 

发 

运 结 果 语 

四 $x 和 S$y 的 联合 (但 不 覆盖 重复 的 键 ) 县 

= 如 果 $x 和 $y 拥有 相同 的 键 / 值 对 ， 则 返回 true 础 
-一 如 果 $x 和 $y 拥有 相同 的 键 / 值 对 ， 且 顺序 相同 类 型 相同 ， 则 返 

回 tme 识 

如 果 S$x 不 等 于 Sy， 则 返回 true Ed 

， 则 返回 tue 2 

| 不 全 等 “| sx 一 sy ”| 如 果 sx 与 $y 完全 不 同 ， 则 返回 tme 言 


12.4.7 案例 10 一 一 逻辑 运算 符 


一 个 编程 语言 最 重要 的 功能 之 一 就 是 要 进行 逻辑 判断 和 运算 ， 如 逻辑 和 、 逻 辑 或 、 逻 辑 
否 都 由 这 些 罗 辑 运算 符 控制 。 逻 辑 运算 符 的 含义 如 表 12-6 所 示 。 
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表 12-6 逻辑 运算 符 
运算 符 名 称 

&& 逻辑 和 
AND 逻辑 和 

逻辑 或 
OR 逻辑 或 
! 逻辑 否 
NOT 逻辑 否 


12.5 PHP 中 常用 的 控制 语句 


PHP 中 的 控制 语句 主要 包括 条 件 语句 、 循 环 语句 等 ， 其 中 条 件 控制 语句 又 可 以 分 为 多 种 
条 件 语句 ， 如 下 语句 、switch 语句 等 ， 循环 语句 包括 while 循环 、do…while 循环 和 for 循 
环 等 。 


12.5.1 案例 11 一 一 if 语句 


站 语句 是 最 为 常见 的 条 件 控制 语句 。 它 的 格式 如 下 : 
if (条 件 判断 语句 ) { 
命令 执行 语句 


} 
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这 种 形式 只 是 对 一 个 条 件 进行 判断 。 如 果 条 件 成 立 ， 则 执行 命令 语句 ; 否则 不 执行 。 


这 【 例 12-12】 让 语句 的 使 用 (实例 文件 为 ch12\12.12.php)。 
亿 

课 <HTML> 

2 <HERD> 


<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<TITLE>if 语句 的 使 用 </TITLE> 

















</HEAD> 
<BODY> 
<?php 

Snum = rand(1,100); // 使 用 rand () 函数 生成 一 个 随机 数 

if ($num % 2 != 0){ // 判 断 变量 snum 是 否 为 奇数 

echo "\$num = Snumny // 如 果 为 奇数 ， 输 出 表达 式 和 说 明文 字 
、 echo "<br>$num 是 奇数 。"; 

} 
2 一 口 x 
</BODY> @ [加 -1@ rp/ccalho. P - © | @ i 人 用 
</HTML> 文件 (月 ”六 岛 (E) ”查看 (V) 收藏 突 (A) 工具 (T) ”帮助 (H) 

Snum = 81 
程序 运行 后 刷新 页 面 ， 结 果 如 图 12-12 81 是 奇数 
所 示 。 
12.5.2 ”案例 12 一 一 if…else 语句 图 12-12 例 12-12 的 程序 运行 结果 
如 果 是 非 此 即 彼 的 条 件 判 断 ， 可 以 使 用 下 …else 语句 。 它 的 格式 如 下 : 
if (条 件 判断 语句 ) { 
命令 执行 语句 R; 
}elsei 
命令 执行 语句 B; 


} 
这 种 结构 形式 首先 判断 条 件 是 否 为 真 ， 如 果 为 真 ， 则 执行 命令 语句 A; 否则 执行 命令 语 


【 例 12-13】if…else 语句 的 使 用 (实例 文件 为 ch12\12.13.php)。 


<HTML> 
<HEAD> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<TITLE>if..else 语句 的 使 用 </TITLE> 
</HEAD> 
<BODY> 
<?php 
$d=date ("D"); 
if ($d=="Fri") 
echo "今天 是 周 五 哦 1"; 
Slse 
echo "可 惜 今天 不 是 周 五 1"; 
人 
</BODY> 
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</HTML> 


程序 运行 后 结果 如 图 12-13 所 示 。 
12.5.3 ”案例 13 一 一 else if 语句 


在 条 件 控制 结构 中 ， 有 时 会 出 现 多 于 两 种 的 选择 ， 
此 时 可 以 使 用 else 让 语句 。 它 的 语法 格式 如 下 : 


eg a 
执行 语句 ; 
}else a { 
命令 执行 语句 ; 
| 
elsef{ 
命令 执行 语句 ; 
Ws 


【 例 12-14】else 让 语句 的 使 用 (实例 文件 为 ch12\12.14.php)。 


<HTML> 
<HEAD> 


<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 


<TITLE>else if 语句 的 使 用 </TITLE> 
</HEAD> 
<BODY> 
<?php 
$score = 85; 
if ($score >= 0 and $score <= 60){ 
echo "您 的 成 绩 为 差 "; 
}else if($score > 60 and $score <= 
echo "您 的 成 绩 为 中 等 "; 
J}elsel{ 


echo "您 的 成 绩 为 优等 " ; 


运行 后 结果 如 图 12-14 所 示 。 














第 
ow| BN 
OE o-oo | 章 
文件 许 枉 (E) 去 硅 (V) 收藏 夫 [A) 工具 (D 才 助 (H) 动 
可 惜 今天 不 是 周 五 ! 态 
网 
站 
天 
妇 
图 12-13” 例 12-13 的 程序 运行 结果 语 
基 
| 
认 
识 
卫 
工 
也 
语 


// 设 置 成 绩 变量 $score 
// 判 断 成 绩 变量 是 否 在 0 一 60 
// 如 果 是 ， 说 明成 绩 为 差 


80){// 和 否则 判断 成 绩 变量 是 否 在 61 一 80 


// 如 果 是 ， 说 明成 绩 为 中 等 
// 如 果 两 个 判断 都 是 fal se， 则 输出 默认 值 
// 说 明成 绩 为 优等 








和 口 x 


由 -| 全 httpy/localho.. ”0C  @ else if 语句 的 使 用 


文件 (月 ”编辑 (E) ”前 看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 





您 的 成 绩 为 优等 





12-14” 例 12-14 的 程序 运行 结果 


27 售 


Dreamweaver CC 动态 网 站 开发 
案例 课堂 (第 2 版 ) 罗 一 


12.5.4 ”案例 14 一 一 switch 语句 


switch 语句 的 结构 是 给 出 不 同情 况 下 可 能 执行 的 程序 块 ， 条 件 满足 哪个 程序 块 ， 就 执行 
个 。 它 的 语法 格式 如 下 : 


switch (条 件 判断 语句 ) { 
case 可 能 判断 结果 a: 
命令 执行 语句 ; 
break; 
case 可 能 判断 结果 b: 
命令 执行 语句 ; 


break; 


| 


村 





ee 
命令 执行 语句 ; 
} 
其 中 ， 若 “条 件 判断 语句 ”的 结果 符合 哪个 “可 能 判断 结果 ”， 就 执行 其 对 应 的 “命令 
执行 语句 ”。 如 果 都 不 符合 ， 则 执行 default 对 应 的 默认 项 “命令 执行 语句 ”。 
【 例 12-15】switch 语句 的 使 用 (实例 文件 为 ch12\12.15.php)。 


<HTML> 
<HEAD> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<TITLE>switch 语句 的 使 用 </TITLE> 
</HEAD> 
<BODY> 
<?php 
$x=57 
switch ($x) 
{ 
case 1: 
echo "数值 为 1"; 
break; 
case 2: 
echo "数值 为 2"; 
break; 
case 3: 
echo "数值 为 3"; 
break; 
case 4: 
echo "数值 为 4"; 
break; 
case 5: 
echo "数值 为 5"; 
break; 
default: 


echo "数值 不 在 1 到 5 之 间 "; 


</BODY> 
</HTML> 


程序 运行 后 结果 如 图 12-15 所 示 。 











一 口 x 
@ 园 -|@ hapy/ocalho.. P - C ||@ owiteh 庄 的 借用 
文件 (月 ”编辑 (E) ” 音 看 (V) ”收藏 夫 (A) ”工具 (D) 帮助 (H) 





数值 为 5 





12-15 ” 例 12-15 的 程序 运行 结果 


12.5.5 “案例 15 一 一 while 循环 语句 


while 循环 的 结构 如 下 : 


while (条 件 判断 语句 ) { 
命令 执行 语句 ; 
:; 


其 中 ， 当 “条 件 判断 语句 ”为 true 时 ， 执 行 后 面 的 “命令 执行 语句 ”， 然 后 返回 到 条 件 
表达 式 继续 进行 判断 ， 直 到 表达 式 的 值 为 假 ， 才 能 跳出 循环 ， 执 行 后 面 的 语句 。 
【 例 12-16】while 语句 的 使 用 (实例 文件 为 ch12\12.16.php)。 


<HTML> 
<HEAD> 


PE 


省 革 一 一 主 朵 嘎 订 站 书号 习 寺 过 直 z1 兴 于 


串 琐 dHd 





<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 


<TITLE>while 语句 的 使 用 </TITLE> 
</HEAD> 
<BODY> 
<?php 
Snum = 1; 
$str = "20 以 内 的 奇数 为 :"; 
while($num <=20){ 
if($num % 2!= 0){ 
$str .= $num." "; 


Snum++7 


} 
echo $str; 
?> 
</BODY> 
</HTML> 
运行 后 结果 如 图 12-16 所 示 。 
本 实例 主要 实现 20 以 内 的 奇数 输出 。 从 1 一 20 
依次 判断 是 否 为 奇数 ， 如 果 是 ， 则 输出 ; 如 果 不 
是 ， 则 继续 下 一 次 的 循环 。 








= 
@ 园 - |@ hp//fiocalho.. 万 -| 加 while 理 各 的 借用 
文件 (有 编 霹 (6 查看 (V) 收藏 夫 (A) 工具 (T) 。 帮助 (H) 














20 以 内 的 奇数 为 1 3 5 7 9 11 13 15 17 19 





12-16 ” 例 12-16 的 程序 运行 结果 
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12.5.6 ”案例 16 一 一 do…while 循环 语句 
do…while 循环 的 结构 如 下 : 


dof{ 
命令 执行 语句 ; 
jwhile (条 件 判断 语句 ) 
其 中 ， 先 执行 do 后 面 的 “命令 执行 语句 ”， 其 中 的 变量 会 随 着 命令 的 执行 发 生变 化 。 当 
此 变量 通过 while 后 的 “条 件 判断 语句 ”判断 为 false 时 ， 停 止 执行 “命令 执行 语句 ”。 
【 例 12-17】do…while 语句 的 使 用 (实例 文件 为 ch12\12.17.php)。 


<HTML> 

<HEAD> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<TITLE>do*…while 语句 的 使 用 </TITLE> 


</HEAD> 
<BODY> 
<?php 
Se = // 声 明 一 个 整数 变量 $aa 
while($aa != 0){ // 使 用 while 循环 输出 
echo "不 会 被 执行 的 内 容 "; ”// 这 句 话 不 会 被 输出 
} 
do{ // 使 用 do…while 循环 输出 


echo "被 执行 的 内 容 "; // 这 句 话 会 被 输出 
}while($aa != 0) 7 


Ee 

</BODY> 

</HTML> 

运行 后 结果 如 图 12-17 所 示 。 从 结果 可 以 看 出 ，while 语句 和 do…while 语句 有 很 大 的 
区 别 。 





二 口 

@ 加 -|@ Mp/iocalho.. P ~ C|| @ dowhile 汪 的 信用 
文件 (F) ”篇 名 (E) ”查看 (V) ”收藏 夫 (A) 工具 ( 帮助 (H) 

wi | 

















图 12-17 例 12-17 的 程序 运行 结果 
12.5.7 ”案例 17 一 一 for 循环 语句 
for 循环 的 结构 如 下 : 


for (exprl1 ;expr2;expr3) 


. 
执行 命令 语句 ; 


念 270 


其 中 ，exprl 为 条 件 的 初始 值 ，expr2 为 判断 的 最 终 值 ， 通 常 都 是 用 比较 表达 式 或 逻辑 表 
达 式 充当 判断 的 条 件 ， 执 行 完 命令 语句 后 ， 再 执行 expr3。 
【 例 12-18】for 循环 语句 的 使 用 (实例 文件 为 ch12\12.18.php)。 


<HTML> 
<HEAD> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<TITLE> for 循环 语句 的 使 用 </TITLE> 
</HEAD> 
<BODY> 

<?php 

for ($i=0; $i<4;$i++) { 

echo "for 语句 的 功能 非常 强大 <br>"; 
3 


下 广 dHd 范 芝 一 一 主导 中 还 十 书 民 习 喷 直 出 Z 小 便 





一 口 x 
[+ © rpi/ecalho.. 只 ~ © | @ forlBFE 的 全 用 
文件 (站 辆 误 日 。 豆 看 (V) 收藏 夫 (A】 工具 (Tm 帮助 (H) 
for 语句 的 功能 非常 强大 























</BODY> for 语句 的 功能 非常 强大 
</HTML> for 语句 的 功能 非常 强大 
运行 结果 如 图 12-18 所 示 。 从 效果 图 可 以 看 图 12-18 “ 例 12.18 的 程序 运行 结果 


出 ， 语 句 被 执行 了 4 次 。 


12.6 PHP 函数 概述 


函数 的 英文 为 function"， 这 个 词 也 是 功能 的 意思 。 顾 名 思 义 ， 使 用 函数 就 是 要 在 编程 过 程 
中 实现 一 定 的 功能 ， 也 即 通过 一 定 的 代码 块 来 实现 一 定 的 功能 。 比 如 ， 通 过 一 定 的 功能 记录 
下 酒店 客人 的 个 人 信息 ， 每 到 他 生日 的 时 候 自动 给 他 发 送 祝贺 E-mail。 并 且 这 个 发 信 功 能 可 
以 重用 ， 可 以 改 在 某 个 客户 的 结婚 纪念 日 时 给 他 发 送 祝 福 E-mail。 所 以 函数 就 是 实现 一 定 功 
能 的 一 段 特定 的 代码 。 


12.6.1 案例 18 一 一 自 定义 和 调用 函数 


其 实在 前 面 的 实例 中 早已 用 过 函数 。define0 函 数 就 是 定义 一 个 常量 。 如 果 现 在 再 写 一 个 
程序 ， 则 同样 可 以 调用 define0 函 数 。 
其 实 ， 更 多 的 情况 下 ， 程 序 员 面 对 的 是 自 定义 函数 。 其 结构 如 下 : 


function name of function( paraml,param2,... ){ 
statement 





} 


其 中 ，name_of function 是 函数 名 ，param1、param2 是 参数 ，statement 是 函数 的 具体 
内 容 。 

下 面 以 自 定 义 和 调 用 函数 为 例 进行 讲解 。 

【 例 12-19】 自 定义 和 调用 函数 (实例 文件 为 ch12\12.19.php)。 


<HTML> 

<HEAD><meta http-equiv="Content-Type" content="text/html; charset=gb2312" 
/> 

<TITLE> 自 定义 和 调用 函数 </TITLE> 

</HEAD> 
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12.6.2 ”实例 19 
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<BODY> 
<?php 
function sayhello($customer){ 


return $customer."。 乡 村 四 月 闲人 少 ， 才 了 蚕桑 又 插 田 。"; 
} 
echo sayhello(' 绿 遍 山 原 白 满 川 ， 子 规 声 里 雨 如 烟 。' ) ; 


2 
</BODY> 
</HTML> 


本 程序 运行 结果 如 图 12-19 所 示 。 








@ 加 -|@ htp//ocalho.. D - || @ ER 用 划 歼 x 


文件 (有 蝙 名 (E) ”查看 (V) 收藏 闪 (A) 工具 (T) 帮助 (H) 
绿 遍 山 原 白 满 川 ， 子 规 声 里 雨 如 烟 。 乡 村 四 月 闲人 少 ， 才 了 看 桑 又 插 田 。 




















12-19 例 12-19 的 程序 运行 结果 
向 函数 传递 参数 数值 





由 于 函数 是 一 段 封闭 的 程序 ， 很 多 时 候 ， 程 序 员 都 需要 向 函数 内 传递 一 些 数据 来 进行 


操作 。 


function 函数 名 称 (参数 1, 参数 2) { 
算法 描述 , 其 中 使 用 参数 1 和 参数 2; 
} 
下 面 以 酒店 房间 住宿 费 总 价 为 例 进行 讲解 。 
【 例 12-20】 向 函数 传递 参数 数值 (实例 文件 为 ch12\12.20.php)。 


<HTML> 


<HEAD><meta http-equiv="Content-Type" content="text/html; charset=gb2312" 


/> 
<TITLE> 向 函数 传递 参数 数值 </TITLE> 
</HEAD> 
<BODY> 
<?php 
function totalneedtopay ($days, $roomprice){ 
$totalcost = $days*$roomprice; 


"需要 支付 的 总 价 :$totalcost"." 元 。"; 


口 





$rentdays = 37 

$roomprice = 168; 

totalneedtopay ($rentdays, $roomprice); 
totalneedtopay (5,198); 


文件 (入 名 (5) 二 看 IV) 收 基 去 工具 Mm 才 幼 HH) 
需要 支付 的 总 价 ，504 元 。 需要 支付 的 总 价 ，990 元 。 


转 -|@ ep/focalhe.. -5 | @ 内 人间 参 交 数值。 居 


拓 





12-20” 例 12-20 的 程序 运行 结果 
运行 结果 如 图 12-20 所 示 。 





12.6.3 实例 20 向 函数 传递 参数 引用 


向 函数 传递 参数 引用 ， 其 实 就 是 向 函数 传递 变量 引用 。 参 数 引 用 一 定 是 变量 引用 ， 静 态 
数值 是 没有 引用 一 说 的 。 由 于 在 变量 引用 中 已 经 知道 ， 变 量 引用 其 实 就 是 对 变量 名 的 使 用 ， 
是 对 特定 的 一 个 变量 位 置 的 使 用 。 

下 面 仍然 以 酒店 服务 费 总 价 为 例 进行 讲解 。 

【 例 12-21】 向 函数 传递 参数 引用 (实例 文件 为 ch12\12.21.php)。 


<HTML> 


<HERD><meta http-equiv="Content-Type" content="text/html; charset=gb2312" 
/> 
</HEAD> 
<BODY> 
<?php 
$fee = 300; 


$serviceprice = 50; 
function totalfee(&$fee,$serviceprice){ 
$fee = $feet+$serviceprice; 


echo "需要 支付 的 总 价 : $fee" ." 元 。"; 











二 旭 % 
} [ 辆 -|®@ htpy/ocalho- PD ~ 
totalfee ($fee, $serviceprice); 9 Ee ee he 
totalfee ($fee, $serviceprice); 时 机 
2 需要 支付 的 总 价 :350 元 。 需 要 支付 的 总 价 :400 元 。 
</BODY> 
</HTML> 
运行 结果 如 图 12-21 所 示 。 图 12-21 例 12-21 的 程序 运行 结果 


12.6.4 实例 21 一 一 从 函数 中 返回 值 


以 上 的 一 些 例子 中 ， 都 是 把 函数 运算 完成 的 值 直接 打印 出 来 。 但 是 ， 很 多 情况 下 ， 程 序 
并 不 需要 直接 把 结果 打印 出 来 ， 而 是 仅仅 给 出 结果 ， 并 且 把 结果 传递 给 调用 这 个 函数 的 程 
序 ， 为 其 所 用 。 

这 里 需要 使 用 到 retum 关键 字 。 下 面 以 综合 酒店 客房 价格 和 服务 价格 为 例 进行 讲解 。 

【 例 12-22】 从 函数 中 返回 值 (实例 文件 为 ch12\12.22.php)。 


<HTML> 

<HEAD><meta http-equiv="Content-Type" content="text/html; charset=gb2312" 

wy 

</HEAD> 

<BODY> 

<?php 

function totalneedtopay ($days, $roomprice){ 
return $days*$roomprice; 





由 -| 全 hapylocalho- P - 上 | @ localhost 
文件 人 闹 问 (日 。 坦 看 MI) 收 项 夫 (A) 工具 (1 。 帮 动 (H) 


PE 


省 洋 一 一 主导 大玉 头 忆 基 习 斌 过 由 z1 尖 国 


串 琐 dHd 





| 





SrentdaVys = 3; pr 
$roomprice = 168; 
echo totalneedtopay($rentdays, $roomprice); 
Re 
</BODY> 





</HTML> 


运行 结果 如 图 12-22 所 示 。 


图 12-22 例 12-22 的 程序 运行 结果 
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12.6.5 ”实例 22 一 一 对 函数 的 引用 


不 管 是 PHP 中 的 内 置 函数 ， 还 是 程序 员 在 程序 中 的 自 定义 函数 ， 都 可 以 直接 简单 地 通过 
函数 名 调用 。 但 是 在 操作 过 程 中 也 有 些 不 同 ， 大 致 可 分 为 以 下 3 种 情况 。 

(1) 如 果 是 PHP 的 内 置 函数 ， 如 date0， 可 以 直接 调用 。 

(2) 如 果 这 个 函数 是 PHP 的 某 个 库 文件 中 的 函数 ， 则 需要 用 include0 或 require0 函 数 把 
此 库 文件 加 载 ， 然 后 才能 使 用 。 

(3) 如 果 是 自 定义 函数 ， 若 与 引用 程序 同 在 一 个 文件 中 ， 则 可 直接 引用 。 如 果 此 函数 不 
在 当前 文件 内 ， 则 需要 用 include() 或 require0 函 数 加 载 。 

对 函数 的 引用 ， 实 质 上 是 对 函数 返回 值 的 引用 。 

【 例 12-23】 对 函数 的 引用 (实例 文件 为 ch12\12.23.php)。 


<HTML> 

<HEAD> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<TITLE> 对 函数 的 引用 </TITLE> 


</HEAD> 

<BODY> 

<?php 

function &example ($aa=1){ // 定 义 一 个 函数 ， 别 忘 了 加 “&” 符 号 
return $aa; // 返 回 参 数 $str 


$bb= &example (" 请 君 试问 东 流 水 ， 别 意 与 之 谁 短 长 ? ") ; ”// 声 明 一 个 函数 的 引用 $str1l; 
echo $bb."<p>"; 

二 

</BODY> 

</HTML> 


运行 结果 如 图 12-23 所 示 。 
12.6.6 ”实例 23 一 一 对 函数 取消 引用 





- 0O x 
由 -| 全 hapyWiiocalho 中- O  @ BI 用 
文件 (有 蝙 句 (E) 查看 (V) 收藏 夫 (A) 工具 (T) 。 帮助 (H) 




















请 君 试问 东 流 水 ， 别 意 与 之 谁 短 长 ? ~ 
对 于 不 需要 引用 的 函数 ， 可 以 做 取消 操作 。 
取消 引用 函数 使 用 unset0 函 数 来 完成 ， 目 的 是 断 v 
开 变 量 名 和 变量 内 容 之 间 的 绑 定 ， 此 时 并 没有 销 2 
毁 变 量 内 容 。 12-23” 例 12-23 的 程序 运行 结果 
【 例 12-24】 对 函数 取消 引用 (实例 文件 为 ch12\12.24.php)。 
<HTML> 
<HEAD> 


<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 


<TITLE> 对 函数 取消 引用 </TITLE> 


</HEAD> 
<BODY> 
<?php 
Snum = 166; // 声 明 一 个 整 型 变量 
Smath = &$num; // 声 明 一 个 对 变量 Snum 的 引用 $math 


echo "\$math is: ".$math."<br>";  // 输 出 引用 Smath 


unset ($math); // 取 消 引 用 $math 

echo "\$math is: ".$math."<br>"; // 再 次 输出 引用 

echo "\$num is: ".$num; // 输 出 原 变 量 
> 
</BODY> 剖 
</HTML> 


运行 结果 如 图 12-24 所 示 。 





- 0O x 
@ @ httpi//localhost/122: -0 | 和 @ 对 函数 取消 引用 
文件 (F) ”编辑 (E) ”查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 


Smath is: 166 
Smath is: 
Snum is: 166 





省 藉 一 一 主 朵 嘎 订 着 忆 导 习 二 过 由 z1 当 国 


和 





串 汶 dHd 





图 12-24 ” 例 12-24 的 程序 运行 结果 


12.7 ”综合 案例 一 一 创建 酒店 系统 在 线 订 房 表 


本 实例 主要 创建 酒店 系统 的 在 线 订房 表 ， 其 中 需要 创建 两 个 PHP 文件 。 具 体 创建 步 又 


在 网 站 主 目录 下 建立 文件 formstringhandler.php。 输 入 以 下 代码 并 保存 : 


<!DOCTYPE html> 
<HTML> 
<HEAD><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
您 的 订房 信息 : </HEAD> 
<BODY> 
<?php 

$DOCUMENT ROOT = $ SERVER['DOCUMENT ROOT']; 

$customername = trim($ POST['customername']); 

$gender = $ POST['gender']; 

$arrivaltime = $ POST['arrivaltime']; 

$phone = trim($ POST['phone']); 

$email = trim($ POST['email']); 

$info = trim($ POST['info']); 

if(!eregi('^[a-zA-20-9 \-\.]+@[a-zA-20-9\-]+\. [a-zA-20-9 \-\.]+ 
$', $email)){ 

echo "这 不 是 一 个 有 效 的 email 地 址 ， 请 返回 上 页 且 重 试 "; 
二 下 ES 

¥ 

if(!eregi('^[0-9]$',$phone) and strlen($phone)<= 4 or strlen($phone)>= 
15){ 

echo "这 不 是 一 个 有 效 的 电话 号 码 ， 请 返回 上 页 且 重 试 "; 
exit 
} 
if( $gender == "m"){ 
$customer = "先生 "; 








下 
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}else{ 
$customer = "女士 "; 

} 

echo '<p> 您 的 订房 信息 已 经 上 传 ， 我 们 正在 为 您 准备 房间 。 确认 您 的 订房 信息 如 下 :</p>"'; 

echo $customername."\t".$customer.' 将 会 在 '.S$arrivaltime-.' 天 后 到 达 。 您 的 电话 
为 ' .Sphone ."。 我 们 将 会 发 送 一 封 电子 邮件 到 您 的 email 邮箱 : " .$email."。<br /><br /> 另 
外 ， 我 们 已 经 确认 了 您 其 他 的 要 求 如 下 br /> br /> 

echo nl2br ($info); 

echo "<p> 您 的 订房 时 间 为 :" .date('Y m d H: i: s')."</p>"; 
> 
</BODY> 
</HTML> 


ED 在 网 站 主 目录 下 建立 文件 form4string.html， 输 入 以 下 代码 并 保存 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<HTML xmlns="http://www.w3.o0rg/1999/zxhtml"> 
<HEAD> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<h2>GoodHome 在 线 订房 表 。</h2> 
</HEAD> 
<BODY> 
<form action="formstringhandler.php" method="post"> 
<table> 
<tr bgcolor="#3399FF" > 
<td> 客 户 姓 名 :</td> 
<td><input type="text" name="customername" size="20" /></td> 
</tr> 
<tr bgcolor="#CCCCCC" > 
<td> 客 户 性 别 : </td> 
<td> 
<select name="gender"> 
<option value="m"> 男 </option> 
<option value= "f"> 女 </option> 
</select> 
</td> 
3 
<tr bgcolor="#3399FF" > 
<td> 到 达 时 间 :</td> 
<td> 
<select name="arrivaltime"> 
<option value="1"> 一 天 后 </option> 
<option value="2"> 两 天 后 </option> 
<option value="3"> 三 天 后 </option> 
<option value="4"> 四 天 后 </option> 
<option value="5"> 五 天 后 </option> 
</select> 
</td> 
</tr> 
<tr bgcolor="#CCCCCC" > 
<td> 电 话 :</td> 
<td><input type="text" name="phone" size="20" /></td> 
E> 
<tr bgcolor="#3399FF" > 


<td>email:</td> 


<td><input type="text" name="email" size="30" /></td> 


</tr> 
<tr bgcolor="#CCCCCC" > 


<td> 其 他 需求 :</td> 


<td> <textarea name="info" rows="10" cols="30"> 


填 在 这 里 。</textarea> 
</td> 
/EE> 
<tr bgcolor="#666666" > 


如 果 您 有 什么 其 他 要 求 ， 请 


<td align="center"><input type="submit" value=" 确 认 订房 信息 " /></td> 


</tr> 
</table> 
</form> 
</BODY> 
</HTML> 


SS 运行 form4string.html， 结 果 如 图 12-25 所 示 。 


EEDZ 填写 表单 。 
间 】 为 “三 天 后 ”， 


wangxiaoming(@hotmail.com, 


【客户 姓名 】 为 “王小明 ”， 
【电话 】 为 “135922xXxxxXx77”， 
【其 他 需求 】 为 “两 壶 开水 ， 


【客户 性 别 】 为 “ 男 ”，【 到 达 时 
email 为 


【Enter】 一 条 白 毛巾 ， 


【Enter】 一 个 冰激凌 ”。 单 击 【 确 认 订 房 信息 】 按 钮 ， 浏 览 器 会 自动 跳 转 至 
formstringhandler.php 页 面 ， 显 示 结 果 如 图 12-26 所 示 。 


- oO x 
加 全 REED © @ oeahon a 
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GoodHome 在 线 订房 表 。 
需 户 姓名 

客户 性， 各] 
[IE | 
电话 : [ 


| 
Re 
BE 
其 他 和 沽 求 : 


























ET 
您 的 订房 信息 





王小明 先生 将 会 到 达 。 您 的 志 话 为 13592XXXX77。 我 们 将 会 发 送 一 封 电子 邮件 到 你 
的 email 部 条，wangxiacaingbhotzail com. 


另外 ,我 们 已 经 确认 了 您 其 他 的 要求 各 下 ; 
两 计 开 水 ，【Enter】 一 条 白 毛巾 ，【Enter】 一 个 冰 娄 这 
息 的 订房 时 间 为 :2014 04 19 05: 00: 54 











00% 





图 12-25 ”综合 案例 的 程序 运行 结果 (1) 
【代码 详解 】 


12-26 ”综合 案例 的 程序 运行 结果 (2) 


(1) S$customername = trim($ POST['customerame']):、$phone = trim($_ POST[phone']):、 
$email = trimn($_ POST['email]):、S$info = trin($_ POST['info]) 都 是 通过 文本 输入 框 直接 输入 的 。 
所 以 ， 为 了 保证 输入 字符 串 的 整洁 ， 以 方便 处 理 ， 则 需要 使 用 trim() 来 对 字符 串 的 前 后 空格 进 
行 清除 。 另 外 ， 也 可 使 用 ltrim0 清 除 左边 的 空格 或 用 rtrim0 清 除 右边 的 空格 。 

(2) leregi(“^[a-zA-Z0-9_\-\.]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9_\-\.]+$',$Semail) 中 使 用 了 正则 表 


达 式 对 输入 的 email 文本 进行 判断 。 


(3) nl2br0 对 $info 变量 中 的 “Enter” 操 作 ， 也 就 是 <br 忆 操 作 符 进行 了 处 理 。 在 有 新 行 


“ml” 操 作 的 地 方 生成 <br />。 


(4) 由 于 要 显示 中 文 ， 需 要 对 文字 编码 进行 设置 ，charset=gb2312， 就 是 简体 中 文 的 文字 


编码 。 


宫 漂 中 到 汪 瘦 其 到 讲 时 坤 ZL 中 和 鲁 


东洋 


串 琐 dHd 
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12.8 疑难 解 惑 


疑问 1: 如 何 合理 运用 include_once() 和 require_once()? 


答 : include0 和 requireO 函 数 在 其 他 PHP 语句 执行 之 前 运行 ， 引 入 需要 的 语句 并 加 以 执 
行 。 但 是 每 次 运行 包含 此 语句 的 PHP 文件 时 ，include0 和 require0 函 数 都 要 运行 一 次 。 
include0 和 require() 函 数 如 果 在 先前 已 经 运行 过 ， 并 且 引 入 相同 的 文件 ， 则 系统 就 会 重复 引入 
这 个 文件 ， 从 而 产生 错误 。 而 include_once0 和 require_once0 函 数 只 是 在 此 次 运行 的 过 程 中 引 
入 特定 的 文件 或 代码 ， 但 是 在 引入 之 前 ， 会 先 检查 所 需 文件 或 者 代码 是 否 已 经 引入 ， 如 果 已 
经 引入 ， 将 不 再 重复 引入 ， 从 而 避免 造成 冲突 。 


疑问 2: 程序 检查 后 正确 ， 却 显示 Notice: Undefined variable， 这 是 为 什么 ? 


答 : PHP 默认 配置 会 报告 这 个 错误 ， 这 就 是 将 警告 在 页 面 上 打印 出 来 ， 虽 然 这 有 利于 暴 
露 问题 ， 但 现实 使 用 中 会 存在 很 多 问题 。 通 用 解决 办 法 是 修改 php.ini 的 配置 ， 需 要 修改 的 参 
数 如 下 。 

(1) 找到 error_reporting =E_ALL， 修 改 为 “error_reporting=E_ALL & ~E NOTICE”。 

(2) 找到 register_globals = Off， 修 改 为 “register_globals = On”。 





信 278 


第 13 章 
制作 动态 网 页 基础 
一 一 配置 PHP 
服务 器 环境 


在 编写 PHP 文件 之 前 ， 读 者 需要 配置 PHP 服务 器 ， 包 括 软 硬 件 环境 的 检查 、 
如 何 获得 PHP 安装 资源 包 等 ， 本 章 详细 讲解 目前 常见 的 主流 PHP 服务 器 搭配 方 
案 ， 即 PHP+IIS 和 了 PHP+Apache。 另 外 ， 讲 述 了 在 Windows 下 如 何 使 用 WampServer 
组 合 包 ， 最 后 通过 一 个 测试 案例 ， 读 者 可 以 检查 Web 服务 器 建构 是 否 成 功 。 


Dreamweaver CC 动态 网 站 开发 
案例 课堂 (第 2 版 ) 罗 一 


13.1 PHP 服务 器 概述 


在 学 习 PHP 服务 器 之 前 ， 读 者 需要 了 解 HTML 网 页 的 运行 原理 。 网 页 浏览 者 在 客户 端 通 
过 浏览 器 向 服务 器 发 出 页 面 请 求 ， 服 务 器 接收 到 请 求 后 将 页 面 返 回 到 客户 端的 浏览 器 ， 这 样 
网 页 浏览 者 即 可 看 到 页 面 显示 效果 。 

PHP 语言 在 Web 开发 中 作为 嵌入 式 语 言 ， 需 要 嵌入 HTML 代码 中 执行 。 要 想 运行 PHP 
网 站 ， 需 要 搭建 PHP 服务 器 。PHP 网 站 的 运行 原理 如 图 13-1 所 示 。 





图 13-1 PHP 网 站 运行 原理 


从 图 13-1 可 以 看 出 ，PHP 程序 运行 的 基本 流程 如 下 。 
(1) 网 页 浏览 者 首先 在 浏览 器 的 地 址 栏 中 输入 要 访问 的 主页 地 址 ， 按 Enter 键 触发 该 申请 。 
(2) 浏览 器 将 申请 发 送 到 PHP 网 站 服务 器 ， 网 站 服务 器 根据 申请 读 取 数 据 库 中 的 页 面 。 
(3) 通过 Web 服务 器 向 客户 端 发 送 处 理 结 果 ， 客 户 端的 浏览 器 显示 最 终 页 面 。 
人 由 于 在 客户 端 显示 的 只 是 服务 器 端 处 理 过 的 HTML 代码 页 面 ， 所 以 网 页 浏览 
半 。 者 看 不 到 PHP 代码， 这样 可 以 提高 代码 的 安全 性 。 同 时 在 客户 端 不 需要 配置 PHP 
环境 ， 只 要 安装 浏览 器 即 可 。 


13.2 ”安装 PHP 前 的 准备 工作 


在 安装 PHP 之 前 ， 读 者 需要 了 解 安装 所 需要 的 软 硬 件 环境 和 获取 PHP 安装 资源 包 的 途径 。 


13.2.1 软 硬 件 环境 


大 部 分 软件 在 安装 的 过 程 中 都 需要 软 硬 件 环境 的 支持 ， 当 然 PHP 也 不 例外 。 在 硬件 方 
面 ， 如 果 只 是 为 了 学 习 上 的 需求 ， 运 行 PHP 只 需要 一 台 普通 的 计算 机 即 可 。 在 软件 方面 需要 
根据 实际 工作 的 需求 选择 不 同 的 Web 服务 器 软件 。 

PHP 具有 跨 平台 特性 ， 所 以 PHP 开发 用 什么 样 的 系统 不 太 重要 ， 开 发 出 来 的 程序 能 够 很 
轻松 地 移植 到 其 他 操作 系统 中 。 另 外 ，PHP 开发 平台 支持 目前 主流 的 操作 系统 ， 包 括 
Windows 系列 、Linux、UNIX 和 Mac OS 义 等 。 本 书 以 Windows 平台 为 例 进行 讲解 。 

另外 ， 用 户 还 需要 安装 Web 服务 器 软件 。 目 前 ，PHP 支持 大 多 数 Web 服务 器 软件 ， 常 
见 的 有 IIS、Apache、PWS 和 Netscape 等 。 比 较 流行 的 是 IS 和 Apache。 
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13.2.2 ”案例 1 一 一 获取 PHP 7.1 安装 资源 包 


PHP 安装 资源 包 中 包括 了 安装 和 配置 PHP 服务 器 的 所 需 文件 和 PHP 扩展 函数 库 。 获 取 
PHP 安装 资源 包 的 方法 比较 多 ， 很 多 网 站 都 提供 PHP 安装 包 ， 但 是 建议 读者 从 官方 网 站 下 
载 ， 具 体操 作 步 又 如 下 。 

EEC 打开 下 浏览 器 ， 在 地 址 栏 中 输入 下 载 地 址 “http://windows.php.net/download”， 

按 Enter 键 确认 ， 登 录 到 PHP 下 载 网 站 ， 如 图 13-2 所 示 。 
ED 进入 下 载 页 面 ， 单 击 Binaries and sources Releases 下 拉 列 表 框 右 侧 的 下 三 角 按 
钮 ， 在 打开 的 下 拉 列 表 中 选择 合适 的 版 本 ， 这 里 选择 PHP 7.1 版 本 ， 如 图 13-3 所 示 。 


| 六 (OP 
EU mn 


























图 13-2 ”PHP 网 站 下 载 页 面 图 13-3 ”选择 需要 的 版 本 
Se 在 图 13-3 中 ， 下 拉 列 表 中 VC11 代表 的 是 the Visual Studio 2012 compiler 编 
站 译 器 编译 ， 通 常用 于 PHP+IIS 服务 器 下 。 要 求 用 户 安装 Visual C++ Redistributable 
for Visual Studio 2012。 


EB 显示 所 选 版 本 号 中 PHP 安装 包 的 各 种 格式 。 这 里 选择 Zip 压缩 格式 ， 单 击 Zip 
文字 链接 ， 如 图 13-4 所 示 。 
EEC 打开 【另存 为 】 对 话 框 ， 选 择 保存 路 径 ， 然 后 保存 文件 即 可 ， 如 图 13-5 所 示 。 
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13-4 ”选择 需要 版 本 的 格式 图 13-5 【另存 为 】 对 话 框 


划 浊 强 央 洒 dHd 融 副 一 一 对 导 昼 习 二 过 售 坦 ” 几 人 小 鲁 
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13.3 PHP +llS 服务 器 的 安装 配置 


下 面 介 绍 PHP +IIS 服务 器 架构 的 配置 方法 和 技巧 。 


13.3.1 案例 2 一 一 IIS 简介 及 其 安装 


IIS 是 Internet Information Services( 互 联网 信息 服务 ) 的 简称 ， 是 微软 公司 提供 的 基于 
Microsoft Windows 的 互联 网 基本 服务 。 由 于 它 功能 强大 、 操 作 简单 和 使 用 方便 ， 所 以 是 目前 


较为 流行 的 Web 


服务 器 之 一 。 


目前 IS 只 能 运行 在 Windows 系列 的 操作 系统 上 。 针 对 不 同 的 操作 系统 ，IIS 也 有 不 同 的 
版 本 。 下 面 以 Windows 10 为 例 进行 讲解 ， 默 认 情 况 下 此 操作 系统 没有 安装 IIS。 
安装 IIS 组 件 的 具体 操作 步骤 如 下 。 


EID 单 1 


所 示 。 





和 【开始 】 按 钮 ， 在 弹出 的 【开始 】 菜 单 中 选择 【控制 面板 】 命 令 ， 如 图 13-6 


EEJPp 打开 【控制 面板 】 窗 口 ， 双 击 【程序 】 选 项 ， 如 图 13-7 所 示 。 





13-6 选择 【控制 面板 】 命 令 13-7 【控制 面板 】 窗 口 
EEJS 打开 【程序 】 窗 口 ， 从 中 单 击 【应 用 或 关闭 Windows 功能 】 文 字 链 接 ， 如 
图 13-8 所 示 。 
ES 在 打开 的 【Windows 功能 】 对 话 框 中 ， 选 中 Internet Information Services 复 选 


框 ， 然 后 单 击 【确定 】 按 钮 ， 开 始 安装 ， 如 图 13-9 所 示 。 








Wncom 2 = 0 x 


启用 zi 关 间 Windows 功能 9 


ER 
ra 
和 


站 
站 


加 口 口 口 四 口 四 口 口 旧 四 四 昌 





3s 
[| 


13-8 【程序 】 窗 口 13-9 【Windows 功能 】 对 话 框 


ED 安装 完成 后 ， 即 可 测试 是 否 成 功 。 在 正 浏览 器 的 地 址 栏 中 输入 “http://localhost/”， 
打开 IIS 的 欢迎 页 面 ， 如 图 13-10 所 示 。 
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图 13-10 IIS 的 欢迎 页 面 


13.3.2 ”案例 3 一 一 PHP 的 安装 


IIS 安装 完成 后 ， 即 可 开始 安装 PHP。PHP 的 安装 过 程 大 致 分 成 3 个 步骤 。 
1. 解压 和 设置 安装 路 径 


将 获取 到 的 安装 资源 包 解压 缩 ， 解 压缩 后 得 到 的 文件 夹 中 存放 着 PHP 所 需要 的 文件 。 将 
文件 夹 复制 到 PHP 的 安装 目录 中 。PHP 的 安装 路 径 可 以 根据 需要 进行 设置 ， 如 本 书 设置 为 
“D:\PHP7\”， 文 件 夹 复 制 后 的 效果 如 图 13-11 所 示 。 

















13-11 PHP 的 安装 目录 
2. 配置 PHP 


在 安装 目录 中 ， 找 到 php.ini-development 文件 ， 此 文件 正 是 PHP 7.1 的 配置 文件 。 将 这 个 
文件 的 扩展 名 .ini-development 修改 为 ini， 然后 用 【记事 本 】 程 序 打开 。 文 件 中 参数 很 多 ， 所 
以 建议 读者 使 用 记事 本 的 查找 功能 ， 快 速 查找 需要 的 参数 。 
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查找 并 修改 相应 的 参数 值 extension dir= 
"D:PHP7\ext"， 此 参数 为 PHP 扩展 函数 的 查找 路 
径 ， 其 中 “D:\PHP7 ”为 PHP 的 安装 路 径 ， 读 者 
可 以 根据 自己 的 安装 路 径 进行 修改 。 采 用 同样 的 
方法 ， 修 改 参 数 cgi.force_redirect =0。 

另外 ， 去 除 下 面 的 参数 值 扩展 前 的 引号 ， 最 


终结 果 如 图 13-12 所 示 。 


?extension=php 
?extension=php 
?extension=php 
?extension=php 
?extension=php 
?extension=php 
?extension=php 
?extension=php 
?extension=php 
?extension=php 
?extension=php 
?extension=php 
?extension=php 
?extension=php 
?extension=php 


Bz2:d11 
curl.dll 
fileinfo.dll 
gd2.d1l 
gettext .dl11 
gmp .dl11 
intl.dll 
imap.dll 
interbase.dll 
ldap.d1ll 
mbstring.d1ll 
exif.dll 
mysqli.dll 
oci8 12c.dl1 
openssl.dll 





13-12 去除 引号 


;extension=php pdo_ firebird.d1ll 
?extension=php pdo mysql.dll 
?extension=php_pdo oci.dll 
?extension=php pdo odbc.d1ll 
?extension=php_pdo pgsql.d1l 
?extension=php pdo sqlite.dll 
?extension=php_pgsql.d1ll 
?extension=php_shmop.dll 


3. 添加 系统 变量 


要 想 让 系统 运行 PHP 时 找到 上 面 的 安装 路 径 ， 就 
需要 将 PHP 的 安装 目录 添加 到 系统 变量 中 。 具 体操 作 | i 
步骤 如 下 be ey 查看 有 关 计算 机 的 基本 信息 i 
ET 右 击 桌面 上 的 【此 电脑 】 图 标 ， 在 弹出 。 2 Se 
的 快捷 菜单 中 选择 【属性 】 命 令 ， 打 开 【 系 。EEEm mm Windows10 
统 】 窗 口 ， 如 图 13-13 所 示 。 
ET 单 击 【高 级 系统 设置 】 文 字 链 接 ， 打 开 








【系统 属性 】 对 话 框 ， 如 图 13-14 所 示 。 em 
ECDIS 默认 显示 【高 级 】 选 项 卡 ， 在 该 选项 卡 | = 


中 单 击 【环境 变量 】 按 钮 ， 打 开 【 环 境 变 
量 】 对 话 框 。 在 【系统 变量 】 列 表 框 中 选择 
变量 Path， 然 后 单 击 【编辑 】 按 钮 ， 如 图 13-15 所 示 。 


13-13 【系统 】 窗 口 


全 | 
| 















































J 


13-14 【系统 属性 】 对 话 框 13-15 【环境 变量 】 对 话 框 


EC 弹出 【编辑 系统 变量 】 对 话 框 ， 在 【变量 值 】 文 本 框 的 末尾 输入 “;d:\PHP7”， 
如 图 13-16 所 示 。 


og 


节 当 哮 妆 滨 dHd 靖 副 一齐 寻 呈 习 引起 广 下 由 引 内 国 


py A 





变量 各 (Nk Path 











变量 值 Vh FlesNnteNWiFNbinvCNProgram Files\Common FlesVteNWirelessCommonvdAPHP 


[ao | | weap- Ce | w 











图 13-16 【编辑 系统 变量 】 对 话 框 


EECRD 单 击 【 确 定 】 按 钮 ， 返 回 到 【环境 变量 】 对 话 框 ， 依 次 单 击 【 确 定 】 按 钮 即 可 
关闭 对 话 框 ， 然 后 重新 启动 计算 机 。 这 样 设置 的 环境 变量 即 可 生效 。 


13.3.3 ”案例 4 一 一 设置 虚拟 目录 


如 果 用 户 是 按照 前 述 的 方式 来 启动 IS 网 站 服务 器 ， 那 么 整个 网 站 服务 器 的 根 目录 就 位 
于 “(系统 得 符 ):\InetpubWwwwroot” 中 ， 也 就 是 说 如 果 要 添加 网 页 到 网 站 中 显示 ， 都 必须 放置 
在 这 个 目录 下 。 但 是 会 发 现 这 个 路 径 不 仅 太 长 ， 也 不 好 记 ， 使 用 起 来 相当 不 方便 。 
这 些 问 题 都 可 以 通过 修改 虚拟 目录 来 解决 ， 具 体操 作 步 又 如 下 。 
EC 在 桌面 上 右 击 【此 电脑 】 图 标 ， 在 弹出 的 快捷 菜单 中 选择 【管理 】 命 令 ， 打 开 
【计算 机 管理 】 窗 口 ， 在 左 侧 的 列表 框 中 展开 【服务 和 应 用 程序 】 选 项 ， 选 择 
【Internet 信息 服务 (TS) 管 理 器 】 选 项 ， 在 右 侧 选择 Default Web Site 选项 并 右 击 ， 
在 弹出 的 快捷 菜单 中 选择 【添加 虚拟 目录 】 命 令 ， 如 图 13-17 所 示 。 
EEJp)% 打开 【添加 虚拟 目录 】 对 话 框 ， 在 【别名 】 文 本 框 中 输入 虚拟 网 站 的 名 称 ， 这 
里 输入 php7， 然 后 设置 【物理 路 径 】 为 D:\php( 该 文件 夹 须 已 存在 )， 单 击 【确定 】 
按钮 ， 如 图 13-18 所 示 。 
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php7 
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物理 稍 芭 (FF 
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人 

| 本 | 

13-17 【计算 机 管理 】 窗 口 图 13-18 【添加 虚拟 目录 】 对 话 框 


至 此 ， 便 完成 了 IIS 网 站 服务 器 设置 的 更 改 ，IIS 网 站 服务 器 的 网 站 虚拟 目录 已 经 更 改 
为 D:\php 了 。 


13.4 ”PHP+Apache 服务 器 的 环境 搭建 


Apache 支持 大 部 分 操作 系统 ， 搭 配 PHP 程序 的 应 用 ， 即 可 开发 出 功能 强大 的 互动 网 站 。 
本 节 主 要 讲述 PHP+Apache 服务 器 的 搭建 方法 。 


13.4.1 Apache 简介 


Apache 可 以 运行 在 几乎 所 有 的 计算 机 平台 上 ， 由 于 其 跨 平台 和 安全 性 被 广泛 使 用 ， 是 目 
前 最 流行 的 Web 服务 器 端 软件 之 一 。 

和 一 般 的 Web 服务 器 相 比 ，Apache 主要 特点 如 下 。 

(1) 跨 平 台 应 用 。 几 乎 可 以 在 所 有 的 计算 机 平台 上 运行 。 

(2) 开放 源 代码 。Apache 服务 程序 由 全 世界 的 众多 开发 者 共同 维护 ， 并 且 任 何人 都 可 以 
自由 使 用 ， 充 分 体现 了 开源 软件 的 精神 。 

(3) 支持 HITP 1.1 协议 。Apache 是 最 先 使 用 HTTP 1.1 协议 的 Web 服务 器 之 一 ， 它 完全 
兼容 HTTP 1.1 协议 并 与 HITP 1.0 协议 向 后 兼容 。Apache 已 为 新 协议 所 提供 的 全 部 内 容 做 好 
了 必要 的 准备 。 

(4) 支持 通用 网 关 接 口 CCGD。Apache 遵守 CGI 1.1 标准 并 且 提 供 了 扩充 的 特征 ， 如 定制 
环境 变量 和 很 难 在 其 他 Web 服务 器 中 找到 的 调试 支持 功能 。 

(5) 支持 常见 的 网 页 编程 语言 。 可 支持 的 网 页 编程 语言 包括 Perl、PHP、Python 和 Java 
等 ， 支 持 各 种 常用 的 Web 编程 语言 使 Apache 具有 更 广泛 的 应 用 领域 。 

(6) 模块 化 设计 。 通 过 标准 的 模块 实现 专 有 的 功能 ， 提 高 了 项 目 完 成 的 效率 。 

(7) 运行 非常 稳定 ， 同 时 具备 效率 高 、 成 本 低 的 特点 ， 而 且 具 有 良好 的 安全 性 。 


13.4.2 ”案例 5 一 一 关闭 原 有 的 网 站 服务 器 
在 安装 Apache 网 站 服务 器 之 前 ， 如 果 所 使 用 的 操作 系统 已 经 安装 了 网 站 服务 器 ， 如 IIS 


网 站 服务 器 等 ， 用 户 必须 要 先 停止 这 些 服 务 器 ， 才 能 正确 安装 Apache 网 站 服务 器 。 

以 Windows 10 操作 系统 为 例 ， 可 在 桌面 上 右 击 【此 电脑 】 图 标 ， 在 弹出 的 快捷 菜单 中 
选择 【管理 】 命 令 ， 打 开 【 计 算 机 管理 】 窗 口 ， 在 左 侧 的 列表 框 中 展开 【服务 和 应 用 程序 】 
选项 ， 然 后 选择 【Internet 信息 服务 (IIS) 管 理 器 】 选 项 ， 在 右 侧 的 列表 框 中 单 击 【 停 止 】 文 字 
链接 即 可 停止 IS 服务 器 ， 如 图 13-19 所 示 。 

















图 13-19 停止 IIS 服务 器 


如 此 一 来 ， 原 来 的 服务 器 软件 即 失 效 不 再 工作 ， 也 不 会 与 即将 安装 的 Apache 网 站 服务 
器 产生 冲突 。 当 然 如 果 用 户 的 系统 原来 就 没有 安装 IS 等 服务 器 软件 ， 则 可 略 过 这 一 小 节 的 
步骤 直接 进行 服务 器 的 安装 。 


13.4.3 ”案例 6 一 一 安装 Apache 


Apache 是 免费 软件 ， 用 户 可 以 从 官方 网 站 直接 下 载 。Apache 的 官方 网 站 为 

http://www.apache.org。 

下 面 以 Apache 2.2 为 例 ， 讲 解 如 何 安装 Apache。 有 具体 操作 步骤 如 下 。 

EC 双击 Apache 安装 程序 ， 打 开 安 装 向 导 欢 迎 界面 ， 单 击 Next 按钮 ， 如 图 13-20 
所 示 。 

ED 弹出 Apache 许可 协议 界面 ， 阅 读 完 后 ， 选 中 I accept the terms in the license 
agreement 单 选 按钮 ， 单 击 Next 按钮 ， 如 图 13-21 所 示 。 

EEJRS) 弹出 Apache 服务 器 注意 事项 界面 ， 阅 读 完 成 后 ， 单 击 Next 按钮 ， 如 图 13-22 
所 示 。 

EZY 弹出 服务 器 信息 设置 界面 ， 输 入 服务 器 的 一 些 基本 信息 ， 分 别 为 Network 
Domain( 网 络 域 名 )、Server Name( 服 务 器 名 )、Administrator's Email Address( 管 理 员 信 
箱 ) 和 Apache 的 工作 方式 。 如 果 只 是 在 本 地 计算 机 上 使 用 Apache， 前 两 项 可 以 输入 
localhost。 工 作 方 式 建议 选择 第 一 项 : 针对 所 有 用 户 ， 工 作 端口 为 80， 当 机 器 启动 
时 自动 启动 Apache。 单 击 Next 按钮 ， 如 图 13-23 所 示 。 


划 当 强求 涡 dHd 天 型 一 一 汪 盯 昼 司 斌 起 广 坦 山 81 名 | 
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者 Apache HTTP Server 2.2 - Installation Wizard x 


F| 





Welcome to the Installation Wizard for 
Apache HTTP Server 2.2.25 


The Instalation Wizard wil install Apache HTTP Server 2.2.25 
on your computer. To continue, cick Next. 


WARNING: Th program is protected by copyright lew and 
ntematonal reabes. 


se [aa 

















者 Apache HTTP Sever 22 - Installation Wizard x 
icense Agreement 
Please read the folowing icense agreement carefuly, 
Apache License ~ 
Version 2.0, January 2004 
http:Ivww.apache.org/licenses/ 


ERMS AND COND TIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 
1. Definitions. 
“License” shall mzan the terms and conditons for use, reproduction, and 
istribution as defned by Secions 1through 9 ofthis document 
© laccept the temsm theicense agreement 
OL do not accept the emsin the icense agreement 
Instalsheld 





[<Bad Next> |]| Canel | 











13-20 ”欢迎 界面 


元 Apache HTTP Server 22 - Installaton Wizard x 





Apache HTTP Sever 和 


[whatisit? 

[The Apache HTTP Sever is a powerful and flexitle HTTP/1.1 compliant web sewer 
orioinahy desioned as a replacement for the NCSA HTTP Server thas orown th be 
Ithe most popular web server on the Inlsmet As a project ofthe Apacne Software 
Foundation, the developers aim to collaboratvely develop and maintain a robust 
commercial-grade, standards-based server withfreely avalable source code. 


(The LatestVersion 
Detalls of the latest version can be found on the Apache HTTP server project page 
lunder 











<Bad [Net> |] coce 


Read This First 
Readthis Before Running Apache on Windows. 





13-21 Apache 许可 协议 界面 


| 朝 Apsche HTTP Server 22 - nstalation Wizard x 


Server Information 
Please enter your servers nformation. 


Network Doman (e.g, somenet.com) 
[3 
Server Name (e.g wn.somenet.con): 
3 

Adnnist ators Emal Address (eg webmaster @somenet.con): 
Pann eoESToOFr RNMOC OHCP HOST| 
Instal Apadhe HTTP Server 2.2programs and shorteuts for: 

© for A Users, on Port 30, 25 a Service ~-Recommended, 

Oony fo the Current User, on Port 8080, when started Manualy, 


rolshed 








Cel 





图 13-22 Apache 服务 器 注意 事项 界面 


图 13-23 ”服务 器 信息 设置 界面 


ED 弹出 安装 类 型 界面 ， 其 中 Typical 为 典型 安装 ，Custom 为 自 定义 安装 。 默 认 情 
况 下 ， 选 择 典型 安装 即 可 ， 单 击 Next 按钮 ， 如 图 13-24 所 示 。 

EC 弹出 安装 路 径 选择 界面 ， 单 击 Change 按钮 ， 可 以 重新 设置 安装 路 径 ， 本 实例 采 
用 默认 安装 路 径 ， 单 击 Next 按钮 ， 如 图 13-25 所 示 。 


晨 Mpache HTTP ca x| 


Setup Type 
Choose the sehup type that best suits your reeds. 


Typical progran faaauraa rdl be natalled, (Headers and iranes 
or compiing modies vil not be retaled.) 





cheose which pregram featurcs you wont nataled and where they 
wilbe nataled Femmended for advencsd uaera 


rstalshied 











期 Apache HTTP Server 22 -netalaton Ward x 


Destination Foler 
Cick Change toineiall 0 a different folder 


atal Apace HrTP Server 2.2 10 the folder: 
Ciprogram Fies (xe6) Wpache Software Foundation Wpache2.2\ | Change | 


Instatsnaa 








<pad Next > card | 

















13-24 ”安装 类 型 界面 


13-25 ”安装 路 径 选 择 界面 


| 























第 
ED 弹出 安装 准备 就 绪 界 面 ， 单 击 Install 按钮 ， 如 图 13-26 所 示 。 四 
EEJB) 系统 开始 自动 安装 Apache 主 程序 ， 安 装 完 成 后 ， 弹 出 提示 信息 对 话 框 ， 单 击 ”中 
Finish 按钮 关闭 对 话 框 ， 如 图 13-27 所 示 。 Ee 
蝴 Npoche HTTP Server 22 _ installoton Wizord x Ce aeion Wi 动 
ee -df 和 En 网 
页 
人 So 基 
nn 础 
配 
置 
卫 
EE 
oo 
PR 服 
sa ma ee I 国 本 到 本 
环 

图 13-26 ”安装 准备 就 绪 界面 图 13-27 ”Apache 安装 完成 境 : 


13.4.4 ”案例 7 一 一 将 PHP 与 Apache 建立 关联 


Apache 安装 完成 后 ， 还 不 能 运行 PHP 网 页 ， 需 要 将 PHP 与 Apache 建立 关联 。 

Apache 的 配置 文件 名 称 为 httpd.conf， 此 为 纯 文本 文件 ， 用 记事 本 即 可 打开 编辑 。 此 文件 
存放 在 Apache 安装 路 径 的 Apache2vconfig\ 目 录 下 。 另 外 ， 也 可 以 通过 单 击 【开始 】 按 钮 ， 在 
打开 的 菜单 中 选择 Apache HTTP Server 2.2 一 Edit the Apache httpd.conf Configuration File 命 
令 ， 如 图 13-28 所 示 。 

打开 Apache 的 配置 文件 后 ， 首 先 设置 网 站 的 主 目录 。 例 如 ， 如 果 将 案例 的 源 文件 放 在 D 
盘 的 php7book 文件 夹 下 ， 则 主 目录 就 需要 设置 为 d:/php7book/。 在 httpd.conf 配置 文件 中 找到 
DocumentRoot 参数 ， 将 其 值 修改 为 "d:/php7book/"， 如 图 13-29 所 示 。 


国 epdconf -15 二 0 x 
Er 二 寺 M， 吾 








中 
虽 
日 
昌 
日 






天 Apede hm sever22 


an be ¢ontigured with respec 
re allowed anc/or disabled in that 
Edit the Apache httpd.con 





国 Editthe Apache httpd.conf Co 





| Help, rm Stuck! NR 


全 ”在 这 里 输入 你 要 搜索 的 内 容 








13-28 选择 Apache 配置 文件 13-29 ”设置 网 站 的 主 目录 

下 面 指定 php.ini 文件 的 存放 位 置 。 由 于 PHP 安装 在 dphp7， 所 以 php.ini 位 于 
dphp7\php.ini。 在 httpd.conf 配置 文件 中 的 任意 位 置 输入 语句 PHPIniDir"d:\php7\php.ini"， 如 
图 13-30 所 示 。 
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最 后 向 Apache 中 加 入 PHP 模块 。 在 httpd.conf 配置 文件 中 的 任意 位 置 加 入 3 行 语句 : 


LoadModule php7 module"d:/php7/php7apache?2 2.d11" 
AddType application/x-httpd-php .php 
AddType application/x-httpd-php -html 


输入 效果 如 图 13-31 所 示 。 完 成 上 述 操作 后 ， 保 存 httpd.conf 文件 即 可 。 然 后 重启 
Apache， 即 可 使 设置 生效 。 


[PT 本 x 
ET 0 x hopdeon 本 9s 
ZA NED Wt) EE Re 
eh oa WO won 
2 Ss y detault, all raovests are taken iron this directory, but 
Sm tliaves my Pe used to pent 4 other oot? one, 














LDIR /wm 


Dprions direotiye are "None 


mst be nared wexplicitlyt — “Opticns ALL” irectory “ 





, hh 
4 

# The Optlons diroctive Ls both conplicated and important。 Floase so9 3 
Yen) /ht pacter cre) ence a deneore. hau fe fone 4 
# for mpre Inforeatien 4 
# 


Oprtans +Indoxes FollowSyaLinkes ultivLews 











图 13-30 指定 php.ini 文 件 的 存放 位 置 13-31 向 Apache 中 加 入 PHP 模板 


13.5 ”新 手 的 福音 一 一 安装 WampServer 集成 开发 环境 


对 于 刚 开 始 学 习 PHP 的 程序 员 ， 往 往 对 配置 环境 不 知 所 措 ， 为 此 本 节 讲 述 使 用 
WampServer 组 合 包 的 使 用 方法 。WampServer 组 合 包 是 将 Apache、 PHP、 MySQL 等 服务 器 软 
件 安 装配 置 完 成 后 打包 处 理 。 因 为 其 安装 简单 、 速 度 较 快 、 运 行 稳定 ， 所 以 受到 广大 初学 者 
的 青睐 。 


Em 在 安装 WampServer 组 合 包 之 前 ， 需 要 确保 系统 中 没有 安装 Apache、PHP 和 
寻 。 MySQL; 否则 ,需要 先 将 这 些 软 件 印 载 ， 然 后 才能 安装 WampServer 组 合 包 。 


安装 WampServer 组 合 包 的 具体 操作 步骤 如 下 。 

ED 到 WampServer 官方 网 站 http://www.wampserver.com/en/ 下 载 WampServer 的 最 
新 安装 包 WampServer3.0.6-x32.exe 文件 。 

四 ZY 直接 双击 安装 文件 ， 打 开 选 择 安装 语言 界面 ， 如 图 13-32 所 示 。 

单 击 OK 按钮 ， 在 弹出 的 对 话 框 中 选中 I accept the agreement 单 选 按钮 ， 如 图 13-33 
所 示 。 

YY 单 击 Next 按钮 ， 在 弹出 的 对 话 框 中 可 以 查看 组 合 包 的 相关 说 明 信 息 ， 如 图 13-34 
所 示 。 

单 击 Next 按钮 ， 在 弹出 的 对 话 框 中 设置 安装 路 径 ， 这 里 采用 默认 路 径 
cxwamp， 如 图 13-35 所 示 。 

ED 单 击 Next 按钮 ， 在 弹出 的 对 话 框 中 选择 开始 菜单 文件 夹 ， 这 里 采用 默认 设 
置 ， 如 图 13-36 所 示 。 
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EC 单 击 Next 按钮 ， 在 弹出 的 对 话 框 中 确认 安装 的 参数 后 ， 单 击 Install 按钮 ， 如 


图 13-37 所 示 。 
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图 13-32 选择 安装 语言 界面 
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图 13-34 ”信息 界面 
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图 13-35 设置 安装 路 径 
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13-36 ”设置 开始 菜单 文件 夹 


13-37 ”确认 安装 


TB 程序 开始 自动 安装 ， 并 显示 安装 进度 ， 如 图 13-38 所 示 。 


安装 完成 后 ， 进 入 安装 完成 界面 ， 单 击 Finish 按钮 ， 完 成 WampServer 的 安装 操 


作 ， 如 图 13-39 所 示 。 
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Soup Wompsener x Bp Wamp = 
Installing f | 
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ampWinehpphp7D Dharis7 eee Te rion ney be nd een We rel 
| | Alter Way 
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Wampserver 3.0.6 
32 bit x86 
Apache 2.4.23 
PHP 5.6.25/7.0.10 
MySQL 5.7.14 
和 [=| 一 Ed Finsh 
NS 13-38 ”开始 安装 程序 13-39 ”完成 安装 界面 


EC 默认 情况 下 ， 集 成 环境 中 的 PHP 版 本 为 5.6.25， 这 里 需要 修改 为 最 新 的 PHP 7 
版 本 。 单 击 桌面 右 侧 的 WampServer 服务 按钮 轿 ， 在 弹出 的 下 拉 菜 单 中 选择 PHP 命 
令 ， 然 后 在 弹出 的 子 菜单 中 选择 Version 命令 ， 选 择 PHP 的 版 本 为 7.0.10， 如 图 13-40 
所 示 。 

ED 单 击 桌面 右 侧 的 WampServer 服务 按钮 ， 在 弹出 的 下 拉 菜 单 中 选择 Localhost 命 
令 ， 如 图 13-41 所 示 。 
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13-40 ”WampServer 服务 列表 13-41 ”选择 Localhost 命令 
ED) 系统 自动 打开 浏览 器 ， 显 示 PHP 配置 环境 的 相关 信息 ， 如 图 13-42 所 示 。 
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13-42 PHP 配置 环境 的 相关 信息 
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13.6 ”综合 案例 一 一 测试 第 一 个 PHP 程序 


上 面 讲 述 了 3 种 服务 器 环境 的 搭建 方法 ， 读 者 根据 自己 的 需求 进行 选择 安装 即 可 。 建 议 
新 手 采用 集成 开发 环境 。 

下 面 通 过 一 个 实例 讲解 编写 PHP 程序 并 运行 查看 效果 。 下 面 以 WampServer 集成 开发 环 
境 为 例 进 行 讲解 。 读 者 可 以 使 用 任意 文本 编辑 软件 ， 如 记事 本 ， 新 建 名称 为 helloworld 的 文 
件 ， 如 图 13-43 所 示 ， 输 入 以 下 代码 : 


<HTML> 
<HEAD> 
</HEAD> 
<BODY> 
<h2>PHP Hello World - 来 自 PHP 的 问候 。</h2> 
<?php 
echo "Hello, World.™"; 
echo "你 好 世界 。"; 
?> 
</BODY> 
</HTML> 


划 浊 结 岂 洒 dHd 岗 副 一 一 吝 阿 潭 习 济 昔 痊 盐 翰 81 沂 全 


将 文件 保存 在 C:vwampvwww 目录 下 ， 保 存 格式 为 php。 在 浏览 器 的 地 址 栏 中 输入 
“http://localhost/helloworld.php”， 并 按 Enter 键 确认 ， 运 行 结果 如 图 13-44 所 示 。 

【代码 详解 】 

(1) “PHP Hello World - 来 自 PHP 的 问候 。” 是 HTML 中 的 <HEAD><h2>PHP Hello 
World - 来 自 PHP 的 问候 。</h2></HEAD> 所 生成 的 。 

(2) “Hello, World. 你 好 世界 。” 则 是 由 <?php echo "Hello, World."; echo "你 好 世界 。"; ?> 
生成 的 。 

(3) 在 HTML 中 嵌入 PHP 代码 的 方法 即 是 在 <?php ?> 标识 符 中 间 输 入 PHP 语句 ， 语 句 

(4) <?php ?> 标识 符 的 作用 就 是 告诉 Web 服务 器 ，PHP 代码 从 什么 地 方 开始 ， 到 什么 地 
方 结束 。<?php ?> 标识 符 内 的 所 有 文本 都 要 按照 PHP 语言 进行 解释 ， 以 区 别 于 HTML 代码 。 
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EAD) PHP Hello World - 来 自 PEP 的 问候 。 

</HEAD> 


<BODY> Hello，Wcrld 你 好 世界 
<h2>PHP Hello yorld - 来 自 PHP 的 问候 。</h2> 
《?phi 


p 
echo “Hello, Yorld. ”; 


scho “人 好 世界 
?> 








图 13-43 ”记事 本 窗口 图 13-44 ”程序 运行 结果 


23@ 


Dreamweaver CC 动态 网 站 开发 
案例 课堂 (第 2 版 ) 风 一 


13.7 疑难 解 惑 


疑问 1: 如 何 设置 网 站 的 主 目录 ? 


答 : 在 Windows 10 操作 系统 中 ， 设 置 网 站 主 目录 的 方法 如 下 。 

利用 本 章 的 方法 打开 【计算 机 管理 】 窗 口 ， 选 择 Default Web Site 选项 ， 如 图 13-45 
所 示 。 
在 右 侧 窗 格 中 单 击 【基本 设置 】 文 字 链 接 ， 打 开 【 编 辑 网 站 】 对 话 框 ， 单 击 【 物 理 路 
径 】 文本 框 右 侧 的 -| 按钮 ， 即 可 在 打开 的 对 话 框 中 重新 设置 网 站 的 主 目录 ， 如 图 13-46 所 示 。 


























emappreel | me. 


SystemDrive inetpub\wwwrcot | - | 
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Es 厦 
图 13-45 【计算 机 管理 】 窗口 图 13-46 【编辑 网 站 】 对 话 框 
疑问 2: 如 何 卸 载 1S? 


答 : 读者 经 常会 遇 到 IIS 不 能 正常 使 用 的 情况 ， 所 以 需要 首先 卸载 IS， 然 后 再 次 安装 即 

可 。 利 用 本 章 的 方法 打开 【Windows 功能 】 对 话 框 ， 取 消 Internet 信息 服务 ， 单 击 【确定 】 按 
钮 ， 系 统 将 自动 完成 IS 的 卸载 ， 如 图 13-47 所 示 。 

夯 windowe 功能 = W 
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13-47 【Windows 功能 】 对 话 框 


第 14 章 
构建 动态 网 站 
后 台数 据 一 一 使 用 
MySQL 数据 库 





数据 库 是 动态 网 站 的 关键 性 数据 ， 可 以 说 没有 数据 库 就 不 可 能 实现 动态 网 站 的 
制作 ， 本 章 就 来 介绍 如 何 定义 动态 网 站 及 使 用 MySQL 数据 库 ， 包 括 MySQL 数据 
库 的 使 用 方法 、 在 网 页 中 使 用 数据 库 、MySQL 数据 库 的 高 级 设 定 等 。 
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14.1 定义 一 个 互动 网 站 


定义 一 个 互动 网 站 是 制作 动态 网 站 的 第 一 步 ， 许 多 初学 者 会 忽略 这 一 点 ， 以 至 于 由 
Dreamweaver CC 所 产生 的 代码 无 法 与 服务 器 配合 。 


14.1.1 定义 互动 网 站 的 重要 性 


打开 Dreamweaver CC 的 第 一 步 不 是 制作 网 页 和 写 程序 ， 而 是 先 定义 所 制作 的 网 站 ， 原 因 
有 以 下 3 点 。 

(1) 将 整个 网 站 视 为 一 个 单位 来 定义 ， 可 以 清楚 地 整理 出 整个 网 站 的 架构 、 文 件 的 配 
置 、 网 页 之 间 的 关联 等 信息 。 

(2) 可 以 在 同一 个 环境 下 一 次 性 定义 多 个 网 站 ， 而 且 各 个 网 站 之 间 不 冲突 。 

(3) 在 Dreamweaver CC 中 添加 了 一 项 测试 服务 器 的 设置 ， 如 果 事 先 定义 好 了 网 站 ， 就 可 
以 让 该 网 站 的 网 页 连接 到 测试 服务 器 里 的 数据 库 资 源 中 ， 又 可 以 在 编辑 画面 中 预览 数据 库 中 
的 数据 ， 甚 至 打开 浏览 器 来 运行 。 


14.1.2 ”网 页 取得 数据 库 的 原理 


PHP 是 一 种 网 络 程序 语言 ， 它 并 不 是 MySQL 数据 库 的 一 部 分 ， 所 以 PHP 的 研发 单位 就 
制作 了 一 套 与 MySQL 沟通 的 函数 。SQL(Structured Query Language， 结 构 化 查询 语言 ) 就 是 这 
些 函数 与 MySQL 数据 库 连 接 时 所 运用 的 方法 与 准则 。 

几乎 所 有 的 关系 式 数据 库 所 采用 的 都 是 SQL 语法 ， 而 MySQL 就 是 使 用 它 来 定义 数据 库 
结构 、 指 定数 据 库 表 格 与 字段 的 类 型 与 长 度 、 添 加 数据 、 修 改 数据 、 删 除数 据 、 查 询 数据 以 
及 建立 各 种 复杂 的 表格 关联 。 

所 以 ， 当 网 页 中 需要 取得 MySQL 的 数据 时 ， 它 可 以 应 用 PHP 中 MySQL 的 程序 函数 ， 
通过 SQL 的 语法 来 与 MySQL 数据 库 沟通 。 当 MySQL 数据 库 接收 到 PHP 程序 传递 过 来 的 
SQL 语法 后 ， 再 根据 指定 的 内 容 完成 所 叙述 的 工作 再 返回 到 网 页 中 。PHP 与 MySQL 之 间 的 
运行 方式 如 图 14-1 所 示 。 

















14-1 PHP 与 MySQL 之 间 的 运行 方式 


根据 这 个 原理 ， 一 个 PHP 程序 开发 人 员 只 要 在 使 用 到 数据 库 时 遵循 下 列 步骤 ， 即 可 顺利 
获得 数据 库 中 的 资源 。 


(1) 建立 连接 (Connection) 对 象 来 设置 数据 来 源 。 
(2) 建立 记录 集 (Recordset) 对 象 并 进行 相关 的 记录 操作 。 
(3) 关闭 数据 库 连接 并 清除 所 有 对 象 。 


14.1.3 “案例 1 一 一 在 Dreamweaver CC 中 定义 网 站 

设置 网 站 服务 器 是 所 有 动态 网 页 编写 前 的 第 一 个 操作 ， 因 为 动态 数据 必须 要 通过 网 站 服 
务 器 的 服务 才能 运行 ， 许 多 人 都 会 忽略 这 个 操作 ， 以 至 于 程序 无 法 执行 或 是 出 错 。 

1. 整理 制作 范例 的 网 站 信息 


在 开始 操作 之 前 ， 要 先 养 成 一 个 习惯 ， 即 整理 制作 范例 的 网 站 信息 ， 有 具体 就 是 将 所 要 制 
作 的 网 站 信息 以 表格 的 方式 列 出 ， 再 按 表 来 实施 ， 这 样 不 仅 可 以 让 网 站 数据 井井有条 ， 也 在 
维护 工作 时 能 够 更 快 地 掌握 网 站 情况 。 

表 14-1 所 示 为 整理 出 来 的 网 站 信息 


表 14-1 网 站 信息 表 


本 机 服务 器 主 文件 夹 
程序 使 用 文件 夹 
程序 测试 网 址 ://localhost/ 





2. 定义 新 网 站 
整理 好 网 站 的 信息 后 ， 下 面 就 可 以 正式 进入 Dreamweaver CC 进行 网 站 编辑 了 ， 具 体操 作 
步骤 如 下 。 
EEJDp 在 Dreamweaver CC 的 编辑 界面 中 ， 选 择 【 站 点 】 一 【管理 站 点 】 菜 单 命令 ， 如 
图 14-2 所 示 。 
EC 在 弹出 的 【管理 站 点 】 对 话 框 中 单 击 【 新 建站 点 】 按 钮 进入 站 点 定义 对 话 框 ， 
如 图 14-3 所 示 。 


pr 另外 ， 用 户 也 可 以 直接 选择 【站 点 】 了 一 【新 建站 点 了 菜单 命令 进入 站 点 定义 
汇 。 对 话 框 ， 如 图 14-4 所 示 。 
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14-2 ”选择 【管理 站 点 】 菜 单 命令 14-3 【管理 站 点 】 对 话 框 14-4 选择 【新 建站 点 】 菜 单 命令 
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国 于 BY 打开 站 点 设置 对 象 对 话 框 ， 输 入 【站 点 名 称 】 为 “测试 网 站 ”， 选 择 本 地 站 点 
文件 夹 位 置 为 C:VwampVwww\ 如 图 14-5 所 示 。 
EEC 在 左 侧 列表 中 选择 【服务 器 】 选 项 ， 单 击 上 se 按钮 ， 如 图 14-6 所 示 。 









































PR om 
入 ee ee 
= to EE NR | 
m 
CW Cm jm Cm Ce mm) 
图 14-5 设置 站 点 的 名 称 与 存放 位 置 图 14-6 【服务 器 】 选 项 界面 


EEJD 在 【基本 】 选 项 卡 中 和 输入 【服务 器 名 称 】 为 “测试 网 站 ”， 选 择 【连接 方法 】 
为 【本 地 /网 络 】， 选 择 【 服 务 器 文件 夹 】 为 Cwampvwww， 如 图 14-7 所 示 。 
Br URL(Uniform Resource Locator， 统 一 资源 定位 器 ) 是 一 种 网 络 上 的 定位 系统 ， 
外 。 可 称 为 网 站 。Host 指 Internet 连接 的 计算 机 ， 至 少 有 一 个 固定 的 IP 地 址 。 
Localhost 指 本 地 端的 主机 ， 也 就 是 用 户 自己 的 计算 机 。 


EEDRUD 近 择 【高 级 】 选 项 卡 ， 设 置 测试 服务 器 的 【服务 器 模型 】 为 PHP MySQL， 最 后 
单 击 【 保 存 】 按 钮 保存 站 点 设置 ， 如 图 14-8 所 示 。 
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Cm CE Cm FE EE 
图 14-7 【基本 】 选 项 卡 14-8 【高 级 】 选 项 卡 


FE 其 他 可 选 的 服务 器 模型 有 ASP VBScript、ASP JavaScript、ASP. NET (C#、 
| 相 VB )、ColdFusion、JSP 等 。 


ED 返回 到 Dreamweaver CC 的 编辑 界面 中 ， 在 【文件 】 面 板 上 会 显示 所 设置 的 结 
果 ， 如 图 14-9 所 示 。 

EEJB 如 果 想 要 修改 已 经 设置 好 的 网 站 ， 可 以 选择 【站 点 】 一 【站 点 管理 】 菜 单 命 
令 ， 在 打开 的 对 话 框 中 单 击 【铅笔 】 按 钮 国 ， 再 次 编辑 站 点 的 属性 ， 如 图 14-10 
所 示 。 


全 298 


1 

















EE ~ 本 地 和 图 | ee 
加 favicon iee 
helloworld php 
index php 
8 test_sookets. i | 
sn i i em | 














14-9 Dreamweaver CC 的 【文件 】 面 板 


3. 测试 设置 结果 


14-10 【管理 站 点 】 对 话 框 


完成 以 上 的 设置 后 ， 就 可 以 制作 一 个 简单 的 网 页 来 测试 一 下 。 有 具体 的 操作 步骤 如 下 。 
EC 在 【文件 】 面 板 中 添加 一 个 新 文件 ， 并 打开 该 文件 进行 编辑 。 要 添加 新 文件 ， 
可 选取 该 网 站 文件 夹 后 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【新 建文 件 】 命 令 ， 然 后 将 


新 文件 命名 为 testphp， 如 图 14-11 所 示 。 


EEJp) 双击 <testphp> 打 开 新 文件 ， 在 页 面 上 添加 一 些 文字 ， 如 图 14-12 所 示 。 


时 





抱 丰 | 名 二 中 让 


14-11 新 建文 件 


添加 完成 后 直接 按 F12 键 打开 浏览 
器 预览 ， 可 以 看 到 页 面 执行 的 结果 ， 如 
图 14-13 所 示 。 

不 过 这 样 似乎 与 预览 静态 网 页 时 没 
有 什么 区 别 。 仔细 看 看 这 个 网 页 所 执行 
的 网 址 ， 它 不 再 是 以 磁盘 路 径 来 显示 ， 
而 是 以 刚才 设置 的 URL 前 组 http:/ 
localhost/ 再 加 上 文件 名 来 显示 的 ， 这 表 
示 网 页 是 在 服务 器 的 环境 中 运行 的 。 


弛 滨 ~ 





图 14-12 添加 网 页 内 容 





到 口 x 
-|@ vp//ocalho.. P - | @ REX x 
文件 (F) 。 绽 绢 (5) ”查看 (V) ”收藏 夫 (A) ”工具 (D) 。 帮助 (H) 








Hi, Dreamweaver CC !!! 





14-13 ”网 页 预览 结果 


EC 仅仅 这 样 还 不 能 完全 显示 出 互动 网 站 服务 器 的 优势 ， 再 加 入 一 行 代码 来 测试 程 
序 执行 的 能 力 。 首 先 回 到 Dreamweaver CC， 在 刚才 的 代码 后 添加 一 行 ， 执 行 下 列 操 


| 
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作 ， 如 图 14-14 所 示 。 


en 代码 中 的 date0 〇 是 一 个 PHP 的 时 间 函 数 ， 其 中 的 参数 可 设置 显示 格式 ， 可 以 
以 显示 目前 服务 器 的 时 间 ， 而 <?php echo...?> 会 将 函数 所 取得 的 结果 送 到 前 端 浏览 器 
来 显示 ， 所 以 在 执行 这 个 页 面 时 ， 应 该 会 在 网 页 上 显示 出 服务 器 的 当前 时 间 。 
EECDD9 按 Ctlts 组 合 键 保存 文件 后 ， 再 按 F12 键 打 开 浏 览 器 进行 预览 ， 果 然 在 刚才 的 


网 页 下 方 出 现 了 当前 时 间 ， 这 就 表示 设置 确实 可 用 ，Dreamweaver CC 的 服务 器 环境 
也 就 设置 好 ， 如 图 14-15 所 示 。 





Se - 0O x 
FT ra 由 -| 全 htpi/localho.. PD - © | @ 于 要 文档 x | 
Hi, Dreamweaver CC !'!! 文 作 (D。 锭 总 (5) 下 看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 

现在 W910 旦 :加 














Hi, Dreamweaver CC !!! 


现在 的 时 间 是 ，2017-07-18 05:11:18 








图 14-14 ”添加 动态 代码 14-15 ”动态 网 页 预览 结果 


14.2 MySQL 数据 库 的 安装 和 管理 


设置 好 网 站 服务 器 之 后 ， 下 面 还 需要 安装 MySQL 数据 库 ，MySQL 不 仅 是 一 套 功能 强 
大 、 使 用 方便 的 数据 库 ， 更 可 以 跨越 不 同 的 平台 ， 提 供 各 种 不 同 操作 系统 的 使 用 。 


14.2.1 案例 2 一 一 MySQL 数据 库 的 安装 


要 想 在 Windows 中 运行 MySQL， 需 要 32 位 或 64 位 Windows 操作 系统 ， 如 Windows 
XP、 Windows Vista、 Windows 7、 Windows 8、Windows Server 2003、Windows Server 2008 
等 。Windows 可 以 将 MySQL 服务 器 作为 服务 来 运行 ， 通 常 在 安装 时 需要 具有 系统 的 管理 员 
权限 。 

Windows 平台 下 提供 两 种 安装 方式 ，MySQL 二 进 制 分 发 版 (msi 安装 文件 ) 和 免 安 装 版 
(zip 压缩 文件 )。 一 般 来 讲 ， 应 当 使 用 二 进 制 分 发 版 ， 因 为 该 版 本 比 其 他 的 分 发 版 使 用 起 来 要 
简单 ， 不 再 需要 其 他 工具 来 启动 就 可 以 运行 MySQL。 这 里 ， 在 Windows 10 平台 上 选用 图 形 
化 的 二 进 制 安装 方式 ， 其 他 Windows 平台 上 安装 过 程 也 差不多 。 


1. 下 载 MySQL 安装 文件 


下 载 MySQL 安装 文件 的 具体 操作 步骤 如 下 。 

ECG 打开 正 浏览 器 ， 在 地 址 栏 中 输入 网 址 “http://devmysql.com/downloads/installer/”， 
单 击 【 转 到 】 按 钮 ， 打 开 MySQL Installer 5.7.19 下 载 页 面 ， 选 择 Microsoft Windows 
平台 ， 然 后 根据 读者 的 平台 选择 32 位 或 者 64 位 安装 包 ， 在 这 里 选择 32 位 ， 单 击 右 
侧 Download 按钮 开始 下 载 ， 如 图 14-16 所 示 。 





G3 


Br 这 里 32 位 的 安装 程序 有 两 个 版 本 ， 分 别 为 mysql-installer-web-community 和 
以 Imysql-installer-communityl ， 其 中 mysql-installer-web-community 为 在 线 安 装 版 
本 ，mysql-installer-communityl 为 离线 安装 版 本 。 


EEJPp 在 弹出 的 页 面 中 提示 开始 下 载 ， 这 里 单 击 Login 按钮 ， 如 图 14-17 所 示 。 
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图 14-16 MySQL 下 载 页 面 图 14-17 开始 下 载 页 面 
ECDIS 弹出 用 户 登 录 页 面 ， 输 入 用 户 名 和 密码 后 ， 单 击 【 登 录 】 按 钮 ， 如 图 14-18 所 示 。 


Re 如 果 用 户 没 有 用 户 名 和 密码 ， 单 击 【 创 建 账户 】〗 链 接 进 行 注 册 即 可 。 





EC 弹出 开始 下 载 页 面 ， 单 击 Download Now 按钮 ， 即 可 开始 下 载 ， 如 图 14-19 所 示 。 











| [Sy PT 四 
"Eeng , Begin Your Download 

登录 To begin your download, please click the Download Now button below. 

2 o 

Download Now» 

a Lo @ mysat-instalier -community.5.7.19.0.mel 

| x | MD5:2578bfc3c30273cea42d77583b8596b5 
创建 帐户 Signeture 

om | wa | Wa MRS 划 
14-18 ”用户 登录 页 面 14-19 ”正在 下 载 页 面 


2. 安装 MySQL5.7 


MySQL 下 载 完 成 后 ， 找 到 下 载 文 件 ， 双 击 进行 安装 ， 具 体操 作 步 又 如 下 。 
双击 下 载 的 mysql-installer-community-5.7.19.0.msi 文件 ， 如 图 14-20 所 示 。 


说 mysql-installer-community-5.7.19.0.msi Windows Installer 程序 包 387,844 KB 


14-20 ”MySQL 安装 文件 名 称 
EEIps 打开 License Agreement (用 户 许可 证 协议 ) 窗 口 ， 选 中 I accept the license terms 
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(我 接受 许可 协议 ) 复 选 框 ， 单 击 Next 按钮 ， 如 图 14-21 所 示 。 
打开 Choosing a Setup Type (安装 类 型 选择 ) 窗 口 ， 在 其 中 列 出 了 5 种 安装 类 型 ， 
分 别 是 Developer Default( 默 认 安 装 类 型 )、Server only( 仅 作为 服务 器 )、Client only( 仅 
作为 客户 端 )、Full( 完 全 安装 ) 和 Custom( 自 定义 安装 类 型 )。 这 里 选中 Custom ( 自 定义 
安装 类 型 ) 单 选 按钮 ， 单 击 Next 按钮 ， 如 图 14-22 所 示 。 





ET ET 










Choosing a Setup Type 


Pee ee pe sae oe ma irs po, 























图 14-21 用 户 许 可 证 协议 窗口 14-22 ”安装 类 型 窗口 


EEC 打开 Select Products and Features (产品 定制 选择 ) 窗 口 ， 选 择 MySQL Server 
5.7.19-x86 后 ， 单 击 【添加 】 按 钮 党， 即 可 选择 安装 MySQL 服务 器 。 采 用 同样 的 方 
法 ， 添 加 MySQL Documentation 5.7.19-x86 和 Samples and Examples 5.7.19-x86 选 
项 ， 如 图 14-23 所 示 。 

EEJRDp 单 击 Next 按钮 ， 进 入 安装 确认 对 话 框 ， 单 击 Execute (执行 ) 按 钮 ， 如 图 14-24 所 示 。 


CC 








om 


MySQL. Installer MySQL Installer 





ra pane mot or wade he totevtng oooges 











图 14-23 自 定义 安装 组 件 窗口 图 14-24 ”准备 安装 对 话 框 


开始 安装 MySQL 文件 ， 安 装 完成 后 在 Status( 状 态 ) 列 表 下 将 显示 Complete( 安 装 
完成 )， 如 图 14-25 所 示 。 


Se 如 果 在 安装 之 前 ， 系 统 提示 需要 安装 Microsoft Visual C++ 2013， 用 户 根据 提 


汇 。 示 进 行 安 装 即 可 。 
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图 14-25 ”安装 完成 窗口 
14.2.2 ”案例 3 一 一 MySQL 数据 库 的 配置 


MySQL 安装 完毕 之 后 ， 需 要 对 服务 器 进行 配置 。 具 体 的 配置 步骤 如 下 。 
EEC 在 14.2.1 小 节 的 最 后 一 步 中 ， 单 击 Next 按钮 ， 进 入 服务 器 配置 窗口 ， 如 图 14-26 
所 示 。 























14-26 ”服务 器 配置 窗口 14-27 MySQL 服务 器 配置 窗口 


EEB) 单 击 Next 按钮 ， 进 入 MySQL 服务 器 的 具体 配置 窗口 ， 如 图 14-28 所 示 。 

MySQL 服务 器 配置 窗口 中 各 个 参数 的 含义 如 下 。 

Server Configuration Type: 该 选项 用 于 设置 服务 器 的 类 型 。 单 击 该 选项 右 侧 的 下 三 角 按 
钮 ， 即 可 看 到 包括 3 个 选项 ， 如 图 14-29 所 示 。 

图 14-29 中 3 个 选项 的 具体 含义 如 下 。 

(1) Development Machine( 开 发 机 器 ): 该 选项 代表 典型 个 人 用 桌面 工作 站 。 假 定 机 器 上 
运行 着 多 个 桌面 应 用 程序 。 将 MySQL 服务 器 配置 成 使 用 最 少 的 系统 资源 。 

(2) Server Machine( 服 务 器 ): 该 选项 代表 服务 器 ，MySQL 服务 器 可 以 同 其 他 应 用 程序 一 
起 运行 ， 如 FTP、E-mail 和 Web 服务 器 。MySQL 服务 器 配置 成 使 用 适当 比例 的 系统 资源 。 

(3) Dedicated Machine( 专 用 服务 器 ): 该 选项 代表 只 运行 MySQL 服务 的 服务 器 。 假 定 没 
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有 运行 其 他 服务 程序 ，MySQL 服务 器 配置 成 使 用 所 有 可 用 系统 资源 。 


Config Type | Development Machine 图 | 


Development Machine 














图 14-28 MySQL 服务 器 配置 窗口 14-29 MySQL 服务 器 的 类 型 
Pr 作为 初学 者 ， 建 议 选 择 Development Machine (开发 机 器 ) 选 项 ， 这 样 占 用 系统 
站 的 资源 比较 少 。 


EC 单 击 Next 按钮 ， 打 开设 置 服务 器 的 密码 窗口 ， 重 复 输入 两 次 同样 的 登录 密码 ， 
如 图 14-30 所 示 。 
示 系统 默认 的 用 户 名 称 为 root， 如 果 想 添加 新 用 户 ， 可 以 单 击 Add User (添加 
Ne 用 户 ) 按 钮 进行 添加 。 


国 了 BY 单 击 Next 按钮 ， 打 开设 置 服务 器 名 称 窗口 ， 本 案例 设置 服务 器 名 称 为 
MySQL， 如 图 14-31 所 示 。 

















图 14-30 ”设置 服务 器 的 登录 密码 图 14-31 设置 服务 器 的 名 称 


TRY 单 击 Next 按钮 ， 进 入 Plugins and Extensions (插件 与 扩展 ) 界 面 ， 采 用 默认 设 
置 ， 如 图 14-32 所 示 。 

EC 单 击 Next 按钮 ， 进 入 确认 设置 服务 器 窗口 ， 如 图 14-33 所 示 。 

ED 单 击 Execute 按钮 ， 系 统 自动 配置 MySQL 服务 器 。 配 置 完成 后 ， 单 击 Finish 按 
钮 ， 即 可 完成 服务 器 的 配置 ， 如 图 14-34 所 示 。 
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MySQL Instaler lugi ensions MySOL Instaler 














图 14-32 ”插件 与 扩展 界面 图 14-33 ”确认 设置 服务 器 


EEJD) 按键 盘 上 的 Ctrl+Alt+Del 组 合 键 ， 打 开 Windows 任务 管理 器 窗口 ， 可 以 看 到 
MySQL 服务 进程 mysqld.exe 已 经 启动 了 ， 如 图 14-35 所 示 。 


a ee 
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图 14-34 ”完成 设置 服务 器 14-35 【任务 管理 器 】 窗 口 
至 此 ， 就 完成 了 在 Windows 10 操作 系统 环境 下 安装 MySQL 的 操作 。 


14.2.3 ”案例 4 一 一 phpMyAdmin 的 安装 


MySQL 数据 库 的 标准 操作 界面 是 命令 提示 符 的 界面 ， 通 过 MySQL 的 指令 来 建 置 管理 数 
据 库 内 容 。 如 果 想 要 执行 新 增 、 编 辑 及 删除 数据 库 的 内 容 就 必须 要 学 习 陌 生 的 SQL 语法 ， 背 
诵 艰深 的 命令 指令 ， 才 能 使 用 MySQL 数据 库 。 

难道 没有 较为 简单 的 软件 让 用 户 可 以 在 类 似 Access 的 操作 环境 下 ， 直 接管 理 MySQL 数 
据 库 吗 ? 答案 是 肯定 的 ， 而 且 这 样 的 软件 还 不 少 ， 其 中 最 常用 的 就 是 phpMyAdmin 。 

phpMyAdmin 软件 是 一 套 Web 界面 的 MySQL 数据 库 管理 程序 ， 其 不 仅 功能 完整 、 使 用 
方便 ,而且 只 要 用 户 有 适当 的 权限 ， 就 可 以 在 线 修改 数据 库 的 内 容 ， 并 让 用 户 更 安全 、 快 速 
地 获得 数据 库 中 的 数据 。 

用 户 可 以 通过 网 址 http://www.phpmyadmin.net/ 获 得 phpMyAdmin 软件 。 下 面 以 安装 
phpMyAdmin-3.5.3-rcl-all-languages.zip 为 例 讲解 安装 的 方法 ， 具 体操 作 步 又 如 下 。 

EECDRUD 右 击 下 载 的 phppMyAdmin 压缩 文件 ， 在 弹出 的 快捷 菜单 中 选择 【解压 文件 】 命 
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令 ， 如 图 14-36 所 示 。 
EGR2》 将 解压 后 的 文件 放置 到 网 站 根 目录 C:\wampvwww 下 ， 如 图 14-37 所 示 。 
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14-36 ”解压 文件 图 14-37 解压 后 的 文件 
国 于 BY 打开 浏览 器 ， 在 网 址 栏 中 输入 http://localhost/phpMyAdmin/index.php， 运 行 结 果 
如 图 14-38 所 示 ， 该 运行 结果 表示 phpMyAdmin 能 够 正确 执行 。 
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14-38 ” ”phpMyAdmin 运行 界面 
14.2.4 ”案例 5 一 一 MySQL 数据 库 的 建立 


MySQL 数据 库 的 指令 都 是 在 命令 提示 符 界面 中 使 用 的 ， 这 对 于 初学 者 是 比较 困难 的 ， 针 
对 这 一 难题 ， 本 书 将 采用 phpMyAdmin 管理 程序 来 执行 ， 以 便 能 有 更 简易 的 操作 环境 与 使 用 
效果 。 

1. 启动 phpMyAdmin 管理 程序 


phpMyAdmin 是 一 套 使 用 PHP 程序 语言 开发 的 管理 程序 ， 它 采用 网 页 形式 的 管理 界面 。 
如 果 要 正确 执行 这 个 管理 程序 ， 就 必须 在 网 站 服务 器 上 安装 PHP 与 MySQL 数据 库 。 

如 果 要 启动 phpMyAdmin 管理 程序 ， 只 要 单 击 桌 面 右 下 角 的 WampServer 图 标 ， 在 弹出 
的 菜单 中 选择 phpMyAdmin 命令 ， 如 图 14-39 所 示 。phpMyAdmin 启动 后 的 主 界面 如 图 14-40 
所 示 。 用 户 只 需要 单 击 【 新 建 】 链 接 ， 即 可 创建 新 的 数据 库 。 














14-39 选择 phpMyAdmin 命令 14-40 phpMyAdmin 的 工作 界面 


2. 创建 数据 库 


在 MySQL 数据 库 安 装 完毕 之 后 ， 会 有 4 个 内 置 数据 库 ， 即 mysql、information_ schema、 
performance_schema 和 sys。 


(1) mysql 数据 库 是 系统 数据 库 ， 在 24 个 数据 表 中 保存 了 整个 数据 库 的 系统 设置 ， 十 分 


可 


要 


旺 





(2) information_schema 包括 数据 库 系 统 有 什么 库 ， 有 什么 表 ， 有 什么 字典 ， 有 什么 存储 
过 程 等 所 有 对 象 信息 和 进程 访问 、 状 态 信 息 。 

(3) performance_schema 新 增 一 个 存储 引擎 ， 主 要 用 于 收集 数据 库 服务 器 性 能 参数 ， 包 
括 锁 、 互 斥 变量 、 文 件 信息 ;保存 历史 的 事件 汇总 信息 ， 为 提供 MySQL 服务 器 性 能 做 出 详 
细 的 判断 ， 对 于 新 增 和 删除 监控 事件 点 都 非常 容易 ， 并 可 以 随意 改变 MySQL 服务 器 的 监控 
周期 。 

(4) sys 数据 库 是 让 用 户 测试 用 的 数据 库 ， 可 以 在 里 面 添加 数据 表 来 测试 。 


Se performance schema 可 以 帮助 DBA 了 和 解 性 能 降低 的 原因 。mysql、 
以 information schema 为 关键 库 ， 不 能 删除 ; 否则 数据 库 系统 不 再 可 用 。 
这 里 以 在 MySQL 中 创建 一 个 企业 员工 管理 数据 库 company 为 例 ， 并 添加 一 个 员工 信息 
表 employee。 如 图 14-41 所 示 ， 在 文本 框 中 输入 要 创建 数据 库 的 名 称 company， 再 单 击 【 创 
建 】 按 钮 即 可 。 





园 印 服 务 器 : mysql wampserver 


数据 库 司 SQL 三 状态 as 用 户 忆 导 出 司 导入 让 证 Y 更 多 


数据 库 


马 新 奸 孝 据 库 各 
company 排序 规则 日 (@ 巡 








14-41 创建 数据 库 company 


| 
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pr 在 一 个 数据 库 中 可 以 保存 多 个 数据 表 ， 以 本 页 所 举 的 范例 来 说 明 : 一 个 企业 
汇 员工 管理 的 数据 库 中 ， 可 以 包含 员工 信息 数据 表 、 岗 位 工资 数据 表 、 销 售 业绩 数 
据 表 等 。 因 此 ， 这 里 需要 创建 数据 库 company， 也 需要 创建 数据 表 employee。 


3. 认识 数据 表 的 字段 

在 添加 数据 表 之 前 ， 首 先 要 规划 数据 表 中 要 使 用 的 字段 。 其 中 设置 数据 字段 的 类 型 非常 
要， 使 用 正确 的 数据 类 型 才能 正确 保存 和 应 用 数据 。 

在 MySQL 数据 表 中 常用 的 字段 数据 类 型 可 以 分 为 3 种 。 

1) ”数值 类 型 

可 用 来 保存 、 计 算 的 数值 数据 字段 ， 如 会 员 编号 、 产 品 价格 等 。 在 MySQL 中 的 数值 字 
段 按照 保存 的 数据 所 需 空间 大 小 有 表 14-2 所 示 的 区 别 。 


表 14-2 ”数值 类 型 表 


由 





数据 的 表示 范围 





signed -2147483648 一 2147483647 unsigned 0~4294967295 
注 : signed 表示 其 数值 数据 范围 可 能 有 负 值 ，unsigned 表示 其 数值 数据 均 为 正 值 。 


2) 日 期 及 时 间 类 型 
可 用 来 保存 日 期 或 时 间 类 型 的 数据 ， 如 会 员 生 日 、 留 言 时 间 等 。MySQL 中 的 日 期 及 时 间 
类 型 有 表 14-3 至 表 14-5 所 示 的 几 种 格式 。 


表 14-3 日 期 数据 类 型 表 


数据 类 型 名 称 DATE 

存储 空间 3B 

数据 的 表示 范围 | '1000-01-01' 一 '9999-12-31 

数据 格式 "YYYY-MM-DD" “YY-MM-DD" "YYYYMMDD" "YYMMDD" YYYYMMDD 





YYMMDD 
注 : 在 数据 格式 中 ， 若 没有 加 上 引号 为 数值 的 表示 格式 ， 前 后 加 上 引号 为 字符 串 的 表示 格式 。 


表 14-4 ”时间 数据 类 型 














数据 类 型 名 称 TIME 

存储 空间 3B 

数据 的 表示 范围 ‘838:59:59'~'838:59:59' 

数据 格式 Mhh:mm:ssSN "hhmmss"hhmmss 


| 


表 14-5 日 期 与 时 间 数 据 类 型 表 
数据 类 型 名 称 DATETIME 








存储 空间 8B 

数据 的 表示 范围 | '1000-01-01 00:00:00' ~ '9999-12-31 23:59:59' 

数据 格式 "YYYY-MM-DD hh:mm:ss" "YY-MM-DD hh:mm:ss" "YYYYMMDDhhmmss" 
"YYMMDDhhmmss" YYYYMMDDhhmmss YYMMDDhhmmss 





3) ”文本 类 型 
可 用 来 保存 文本 类 型 的 数据 ， 如 学 生 姓名 、 地 址 等 。 在 MySQL 中 文本 类 型 数据 有 表 14-6 
所 示 的 几 种 格式 。 


表 14-6 文本 数据 类 型 表 


文本 数据 类 型 保存 空间 数据 的 特性 


CHAR(M) 必须 指定 字段 大 小 ， 数 据 不 足 时 以 空 自 字 NN 
符 十 江 SN 
VARCHAR(M) 必须 指定 字段 大 小 ， 以 实际 填 入 的 数据 内 
容 来 存储 | 


TEXT 最 多 可 保存 25535 B 不 需 指定 字段 大 小 所 | 
在 设置 数据 表 时 ， 除 了 要 根据 不 同性 质 的 数据 选择 适合 的 字段 类 型 外 ， 有 些 重要 的 字段 
特性 定义 也 能 在 不 同 的 类 型 字段 中 发 挥 其 功能 ， 常 用 的 设置 如 表 14-7 所 示 。 
表 14-7 ”特殊 字段 数据 类 型 表 
定义 内 容 
定义 数值 数据 中 是 否 允 许 有 负 值 ，SIGNED 表示 允许 
自动 编号 ， 由 0 开始 以 1 来 累加 





珊 漠 洲 10SAW 注 集 一 一 满洲 哨 训 卉 到 讲 时 前 圭 ” 坤 | 名 





特性 定义 名 称 适用 类 型 
SIGNED.UNSIGNED | 数值 类 型 
AUTOJNCREMENT | 数值 类 型 








BINARY 文本 类 型 “| 保存 的 字符 有 大 小 写 区 别 

NULL.NOTNULL | 全 部 是 否 人 允许 在 字段 中 不 填 入 数据 

默认 值 全 部 车 是 字段 中 没有 数据 ， 即 以 默认 值 填充 

主键 全 部 主 索 引 ， 每 个 数据 表 中 只 能 允许 一 个 主键 列 ， 而 且 该 栏 数据 不 








能 重复 ， 加 强 数据 表 的 检索 功能 
Sm 如 果 想 要 更 深 了 解 MySQL 其 他 类 型 的 数据 字段 及 详细 数据 ， 可 以 参考 


提示 


全。 ”MySQL 的 使 用 手册 或 MySQL 的 官方 网 站 http://www. mysqLcom。 


4. 添加 数据 表 
要 添加 一 个 员工 信息 数据 表 ， 表 14-8 所 示 为 这 个 数据 表 字 段 的 规划 。 
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表 14-8 ”员工 信息 数据 表 














名 称 是 否 为 空 
员工 编号 cmID INT(8) 
姓名 cmName VARCHAR(20) 
性 别 cmSex CHAR(2 
此 目 cmBirthday 
电子 邮件 cmEmail VARCHAR(100) 
电话 cmPhone 





住址 VARCHAR(100) 


其 中 有 以 下 几 个 要 注意 的 地 方 。 
e 员工 编号 (cmID) 为 这 个 数据 表 的 主 索引 字段 ， 基 本 上 它 是 数值 类 型 保存 的 数据 ， 因 
为 一 般 编 号 不 会 超过 两 位 数 ， 也 不 可 能 为 负数 ， 所 以 设置 它 的 字段 类 型 为 
TINYINT(2)， 属 性 为 UNSIGNED。 在 添加 数据 时 ， 数 据 库 能 自动 为 学 生 编 号 ， 所 以 
在 字段 上 加 入 了 auto_increment 自动 编号 的 特性 。 
e@ ”姓名 (cmName) 属 于 文本 字段 ， 一 般 不 会 超过 10 个 中 文字 ， 也 就 是 不 会 超过 20B， 所 
以 这 里 设置 为 VARCHAR(20)。 
e@ ”性 别 (cmSex) 属 于 文本 字段 ， 因 为 只 保存 一 个 中 文字 ( 男 或 女 )， 所 以 设置 为 CHAR(2)， 
默认 值 为 “ 男 ”。 
e@ ”生日 (cmBirthday) 属 于 日 期 时 间 格式 ， 设 置 为 DATE。 
e@ ”电子 邮件 (cmEmailj) 和 住址 (cmAddress) 都 是 文本 字段 ， 设 置 为 VARCHAR(100)， 最 
多 可 保存 100 个 英文 字符 ，50 个 中 文字 。 
@ ”电话 (cmPhone) 设 置 为 VARCHAR(50)， 因 为 每 个 人 不 一 定 有 这 些 数据 ， 所 以 这 3 个 
字段 允许 为 空 。 
接着 就 要 回 到 phpMyAdnmin 的 管理 界面 ， 为 MySQL 中 的 company 数据 库 添 加 数据 表 。 
在 左 侧 列表 中 选择 创建 的 company 数据 库 ， 输 入 添加 的 数据 表 名 称 和 字段 数 ， 然 后 单 击 【 执 
行 】 按 钮 ， 如 图 14-42 所 示 。 
请 按照 表 14-8 所 示 的 内 容 设置 数据 表 ， 图 14-43 所 示 为 添加 的 数据 表 字 段 。 


Wa sm Sm ABS Ba em om Sms 


phpMyAdmin 于 














图 14-43 ”添加 数据 表 字段 


设置 的 过 程 中 要 注意 以 下 几 点 。 


@ 设置 cmID 为 整数 。 

@ 设置 cmID 为 自动 编号 。 
e@ 设置 cmID 为 主键 列 。 

D2 


表 ， 如 图 14-44 所 示 。 


Hwampserver ? 才 堵 抬 





司 8 3 扩 结 向 月 SQL 去 搜索 如 
二 名 他 关 型 排 刘 组 刚 
四 1emo im@) 





允许 cmEmail、cmPhoned、cmAddress 为 空位 。 
在 设置 完毕 之 后 ， 单 击 【保存 】 按 钮 ， 在 打开 的 界面 中 可 以 查看 完成 的 employee 数据 





全 
加 
UU) 


SL 忆 S 和 A 号 和 访 类 作 法 前 发 涯 
必 性 。 空 默认 模 外 操作 
wseown 杰 无 他 改 加 恒 除 疙 主因 国 蛤 一 画素 引 四 空 月 更 多 





刑 满 六 1DSAW 洱 浏 一席 潍 悄 肇 二 习 潮 半 毅 圭 ” 坤 | 滥 





口 2 emName vachal20 gb2312 chhese dl 。 再 一 必 朋 浊 间 洗面 电 一 司 素 引 了 空间 v 更 多 
加 3omSex charl) gb2312cihese cl 到 郧 < 下 昌 出 力主 旦 赂 站 一 司 素 引 四 主 靖 人 
口 4 cmBirthdey date 于 五 以外 @ Wf 为 三 时 司 叭 - 河 过 引 隐 空间 二 更 
加 5 cmEmail varchar(100) gb2312 chinese ci 是 NULL 性 次 加 刚 5 户 三 壮 阅 叭 一 三 未 引 隔 空 且 vv 更 多 
6 cmPhone 。 varchar(50) gb2312 chinese_ci 是 NULL 个 和 加 刚 晤 户主 对 届 唯一 河 素 引 采 空间 更 多 
同 7 cmAddress varchar(100) gb2312 chinese_ci 是 NULL 人 修 次 罗 刚 8 户 三 壮 疗 叭 一 三 索引 隔 空 用 v 更 多 
全 = #7 国 洲 六 NN 
图 14-44 employee 数据 表 


添加 数据 表 后 ， 还 需要 添加 具体 的 数据 ， 具 体 的 操作 步骤 如 下 。 


EEC 选择 employee 数据 表 ， 





单 击 菜单 上 的 【插入 】 链 接 。 依 照 字 段 的 顺序 ， 将 对 应 


的 数值 依次 输入 ， 单 击 【 执 行 】 按 钮 ， 即 可 插入 数据 ， 如 图 14-45 所 示 。 





omiD WA) uaigned 


emEmal ward 100) 


camphone varchar(s0) 


mhres varchan(100) 
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19024602 


国 日 Fieriies.= 


I 05s2.1234567 
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图 14-45 插入 数据 


EEE2y 按照 图 14-46 所 示 的 数据 ， 重 复 执行 上 一 步 的 操作 ， 将 数据 输入 到 数据 表 中 。 


cmiD cmName cmSex cmBirthday cmEmail 


cmPhone cmAddress 


10001 | 王猛 男 1982-06-02 pingguo@163.com 0992-1234567 长 鸣 路 12 号 
10002 王 小 敏 。 女 1972-06-02 wangxiaomin@163 .com | 0992-1234560 西 华 街 19 号 
10003 | 张 华 男 1970-06-02 zhanghua@163.com “0992-1234561 长安 路 20 号 
10004 王菲 女 1982-03-02 ”wangfei@163 com 0992-1234562 兴隆 衔 11 号 
10005 | 杨康 男 1978-06-02 yangkang@163.com 0992-1234568 长安 街 20 号 
10006 汉 蕴 菲 ” 女 1982-03-20 “fengfeifei@163.com 。 | 0992-1234512 | 长 支 街 42 号 


14-46 输入 的 数据 
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14.3 ”在 网 页 中 使 用 MySQL 数据 库 


一 个 互动 网 页 的 呈现 ， 实 际 上 就 是 将 数据 库 整 理 的 结果 显示 在 网 页 上 ， 所 以 ， 如 何在 网 
页 中 连接 到 数据 库 ， 并 读 出 数据 显示 ， 甚 至 选择 数据 来 更 改 就 是 一 个 重点 。 


14.3.1 案例 6 一 一 建立 MySQL 数据 库 连 接 


在 Dreamweaver CC 中 ， 连 接 数 据 库 十 分 轻松 简单 ， 下 面 将 使 用 一 个 实例 来 说 明 如 何 使 用 
Dreamweaver CC 建立 数据 库 连接 。 
EEC 打开 资源 文件 中 的 “素材 'ehl4\showdataphp” 文 件 ， 静 态 页 面 效 果 如 图 14-47 
所 示 。 
EECIRPD 选择 【窗口 】 一 【数据 库 】 菜 单 命令 ， 进 入 【数据 库 】 面 板 。 单 击 【 数 据 库 】 
面板 中 的 外 按钮 ， 弹 出 如 图 14-48 所 示 的 菜单 ， 选 择 【MySQL 连接 】 命 令 。 





“ 科 襄 阿 络 科技 有 限 公司 员工 生息 表 - 


EEC 人 





图 14-47 ”页 面 的 静态 效果 图 14-48 连接 数据 库 
EEJS 进入 【MySQL 连接 】 对 话 框 后 ， 输 入 自 定义 的 【连接 名 称 】 为 company， 输 入 
【MySQL 服务 器 】 的 用 户 名 和 密码 ， 单 击 【 选 取 】 按 钮 来 选取 连接 的 数据 库 ， 如 
图 14-49 所 示 。 
EEJ 打开 【选取 数据 库 】 对 话 框 ， 在 列表 框 中 选择 company 数据 库 ， 单 击 【 确 
定 】 按 钮 ， 如 图 14-50 所 示 。 


MySQL 连接 X 





这 接 名 种 Eoxpaay 
SQL 服务器: |1ocalhost 
用 户 名 :Foot 

密码 


ET | 














14-49 【MySQL 连接 】 对 话 框 图 14-50 【选取 数据 库 】 对 话 框 


EECRD 返回 到 原 界面 后 ， 单 击 【测试 】 按 钮 ， 提 示 成 功 创建 连接 脚本 ， 单 击 【确定 】 
按钮 ， 如 图 14-51 所 示 。 
EC 回 到 Dreamweaver CC 后 ， 可 以 打开 【数据 库 】 面 板 ，company 数据 库 的 


全 1 


employee 数据 表 在 连接 设置 后 已 经 读 入 Dreamweaver CC 了 ， 如 图 14-52 所 示 。 


en 权限 概念 的 实现 是 MySQL 数据 库 的 特色 之 一 。 在 设置 连接 时 ，Dreamweaver 
站 CC 不 时 会 提醒 为 数据 库 管理 员 加 上 密码 ， 目 的 是 要 让 权限 管理 加 上 最 后 一 道 
锁 。MySQL 数据 库 默 认 是 不 为 管理 员 账 户 加 密码 的 ， 所 以 必须 在 MySQL 数据 库 


调整 后 再 回 到 Dreamweaver CC 时 修改 设置 ， 将 在 下 一 节 中 加 以 介绍 。 
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图 14-51 ”连接 数据 库 14-52 【数据 库 】 面 板 


14.3.2 ”案例 7 一 一 绑 定 记录 集 


在 建立 连接 后 ， 必 须 建立 记录 集 才能 进行 相关 的 记录 操作 。 在 本 小 节 中 将 学 习 如 何在 建 
立 连 接 之 后 添加 记录 集 。 
记录 集 就 是 将 数据 库 中 的 数据 表 按 照 要 求 来 筛选 、 排 序 整理 出 来 的 数据 。 用 户 可 以 在 
【 绑 定 】 面 板 中 进行 操作 。 有 具体 操作 步骤 如 下 。 
EEID 切换 到 【 绑 定 】 面 板 ， 单 击 该 面板 中 的 负 按 钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【 记 
录 集 (查询 )】 命 令 ， 如 图 14-53 所 示 。 
EED29 打开 【记录 集 】 对 话 框 。 输 入 记录 集 名 称 ， 选 择 使 用 的 【连接 】 为 company， 



































选择 使 用 的 数据 表 为 employee， 选 中 【全 部 】 单 选 按钮 ， 显 示 全 部 字段 ， 如 图 14-54 
所 示 。 

| 

CC] 

| 

EE 
图 14-53 ”选择 【记录 集 (查询 )】 命 令 图 14-54 【记录 集 】 对 话 框 


EEJRS》 单 击 【 测 试 】 按 钮 来 测试 连接 结果 ， 此 时 出 现 【测试 SQL 指令 】 对 话 框 ， 上 面 
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显示 了 数据 库 中 的 所 有 数据 ， 单 击 【确定 】 按 钮 回 到 先前 的 对 话 框 。 最 后 单 击 【 确 
定 】 按 钮 结束 设置 ， 回 到 【 绑 定 】 面 板 ， 如 图 14-55 所 示 
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图 14-55 【测试 SQL 指令 】 对 话 框 
EEIRO 单 击 【 确 定 】 按 钮 ， 返 回 【记录 集 】 对 话 框 ， 再 次 单 击 【 确 定 】 按 钮 ， 即 可 完 
成 记录 集 的 绑 定 。 


EEID 在 【 绑 定 】 面 板 中 出 现 上 面 设 置 的 记录 集 名 称 Reccompany， 展 开 后 将 需要 引用 
的 数据 字段 一 一 拖 电 到 网 页 中 ， 如 图 14-56 所 示 。 








14-56 ” 拖 动 字段 到 网 页 中 


ECIUD 在 当前 设置 中 ， 若 是 预览 ， 只 会 读 出 数据 库 的 第 一 笔 数 据 ， 需 要 设置 重复 区 
域 ， 将 所 有 数据 一 一 读 出 。 首 先 要 选取 设置 重复 的 区 域 。 在 【服务 器 行为 】 面 板 中 
单 击 中 按钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【重复 区 域 】 命 令 ， 如 图 14-57 所 示 















| i; | 2. 选 择 【 服 务 人 
1 将 光标 放 在 任意 字段 中 ， 单 击 标签 快速 编辑 ! 1 器 行为 ] 面板 
器 上 的 <ul> 标 签 ， 选 择 需要 添加 重复 区 域 的 行 ! 将 








men ! 3. 选 择 [ 重 复 ! 


14-57 ”设置 重复 区 域 


EC 在 打开 的 【重复 区 域 】 对 话 框 中 设置 【显示 】 为 【所 有 记录 】， 来 显示 所 有 数 
据 ， 单 击 【和 确定】 按钮 ， 如 图 14-58 所 示 。 


EEJRUB 设置 完毕 后 ， 在 表格 左上 方 可 以 看 到 “重复 ”灰色 标签 ， 如 图 14-59 所 示 


舍 314 








二 x 
RE 和 科技 有 限 从 司 并 信息 天 
De | Bs Oe OQ 
加 所 有 记录 | 
pe ee ee wp eee 关 
图 14-58 【重复 区 域 】 对 话 框 14-59 添加 “重复 ”标签 


EECRD 选择 【文件 】--【 保 存 】 菜 单 命令 保存 该 网 页 ， 按 F12 键 即 可 预览 效果 ， 如 
图 14-60 所 示 。 


科 创 网 络 科 技 有 限 公司 员工 信息 表 
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14-60 ”网 页 预览 效果 


EC 细心 的 读者 会 发 现 ， 所 有 牵涉 中 文字 符 的 显示 都 为 “? ”， 这 是 由 于 编码 不 同 
造成 的 ， 下 面 设置 数据 库 连 接 文件 的 编码 为 
简体 中 文 。 在 【文件 】 面 板 的 connections 
文件 夹 下 打开 数据 库 连 接 文件 company.php， 
切换 到 【代码 】 视 图 ， 添 加 以 下 代码 : 


mysql query("set character Set 

'gb2312'") ; // 读 数据 库 编码 

mysql query("set names 'gb2312'");// 写 数据 

库 编 码 

添加 效果 如 图 14-61 所 示 。 

EEC 选择 【文件 】 一 【保存 】 菜 单 命令 保存 该 网 页 ， 按 F12 键 即 可 预览 修改 后 的 效 
果 ， 如 图 14-62 所 示 。 








图 14-61 添加 代码 


科 创 网 络 科技 有 限 公 司 员工 信息 表 





14-62 ”修改 后 的 效果 


14.4 数据 库 的 备份 与 还 原 


在 MySQL 数据 库 里 ， 备 份 与 还 原 数据 库 数 据 ， 是 十 分 简单 又 轻松 的 事情 。 在 本 节 中 ， 





35@ 


Dreamweaver CC 动态 网 站 开发 
案例 课堂 (第 2 版 ) 罗 一 


将 说 明 如 何 备份 与 还 原 MySQL 的 数据 库 。 


14.4.1 案例 8 一 一 数据 库 的 备份 


用 户 可 以 使 用 phpMyAdmin 的 管理 程序 将 数据 库 中 的 所 有 数据 表 导 出 成 一 个 单独 的 文本 
文件 。 当 数据 库 受 到 损坏 或 是 要 在 新 的 MySQL 数据 库 中 加 入 这 些 数据 时 ， 只 要 将 这 个 文本 
文件 插入 即 可 。 

以 本 章 所 使 用 的 文件 为 例 ， 先 进入 phpMyAdmin 的 管理 界面 ， 下 面 就 可 以 备份 数据 库 
了 ， 具 体 的 操作 步骤 如 下 。 

EEJUD 过 择 需要 导出 的 数据 库 ， 单 击 【 导 出 】 链 接 ， 进 入 下 一 页 ， 如 图 14-63 所 示 。 

EEJUP 选择 导出 方式 为 【快速 -显示 最 少 的 选项 】， 单 击 【执行 】 按 钮 ， 如 图 14-64 














所 示 。 
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图 14-63 ”选择 要 导出 的 数据 库 图 14-64 ”选择 导出 方式 


EEC 打开 【另存 为 】 对 话 框 ， 在 其 中 输入 保存 文件 的 名 称 ， 设 置 保存 的 类 型 及 位 
置 ， 如 图 14-65 所 示 。 





-Ran CE 一 而 











图 14-65 【另存 为 】 对 话 框 
SR MySQL 备份 下 的 文件 是 扩展 名 为 *.sql 的 文本 文件 ， 这 样 的 备份 操作 不 仅 简 
SN。 单 ， 文 件 内 容 也 较 小 。 
14.4.2 ”案例 9 一 一 数据 库 的 还 原 


还 原 数据 库 文件 的 操作 步骤 如 下 。 
EGR 在 执行 数据 库 的 还 原 前 ， 必 须 将 原来 的 数据 表 删 除 。 单 击 employees 数据 表 右 侧 


Ga 


| 


的 【删除 】 链 接 ， 如 图 14-66 所 示 。 
EC 此 时 会 显示 一 个 询问 画面 ， 单 击 【确定 】 按 钮 ， 如 图 14-67 所 示 。 
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图 14-66 ”选中 要 删除 的 数据 表 图 14-67 ”信息 提示 框 


ECGRUS 回 到 原 界面 ， 会 发 现 该 数据 表 已 经 被 删除 了 ， 如 图 14-68 所 示 。 
EEC 接着 要 插入 刚才 备份 的 company.sql 文件 ， 将 该 数据 表 还 原 。 单 击 【 导 入 】 链 
接 ， 打 开 【 要 导入 的 文件 】 界 面 ， 如 图 14-69 所 示 。 
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-本 导入 到 数据 库 “company” 
了 i 结构 司 SQL 对 执 索 局 坦 询 加 Sb 加 EE] | got: 
表 。 操作 行 堵 包 类型。 排序 规则 大 小 多余 给 (gzip, bzip2 zip) 或 未 压 纺 。 
0 张 表 总 计 9 InnoDB latin1_swedish_ci 0 字 节 0 字 节 dt a oh 
一 从 计 莽 机 中 上 低 ; En tev 
企 _ 回 全 选 选中 项 : 国 文件 的 字符 集 ， | ud 男 
图 14-68 ”删除 数据 表 14-69 【要 导入 的 文件 】 界 面 


国 于 BY 单 击 界面 中 的 【浏览 】 按 钮 。 打 开 【 选 择 要 加 载 的 文件 】 对 话 框 ， 选 择 上 面 保 
存 的 文本 文件 company.sql， 单 击 【 打 开 】 按 钮 ， 如 图 14-70 所 示 。 

ED 单 击 【执行 】 按 钮 ， 系 统 即 会 读 取 company.sql 文件 中 所 记录 的 指令 与 数据 ， 将 
数据 表 恢 复 ， 如 图 14-71 所 示 。 
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图 14-70 【选择 要 加 载 的 文件 】 对 话 框 14-71 开始 执行 导入 操作 
在 执行 完毕 后 ，company 数据 库 中 又 出 现 了 一 个 数据 表 employee， 如 图 14-72 
所 示 。 
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ECEEEED 





可 寺 构 | 轩 SOL 马 居间 各 局 S4 遇 SA 六 大作 权限 二 vi 
表 = 蜡 作 行 雪 大 类 型 ”排序 规则 大 小 
回 employee 由 浏览 牟 结 构 最 失守 甘 插 入 铮 去 主 合 刚 床 ~€ InnoDB latinl_swedish cl 15 Fs 

1 张 表 总计 GinnoDB iin1_swedish_ci 16 加 


个 回 全 半 选中 项 : el 





图 14-72 导入 的 数据 表 
14.5 ”综合 案例 一 一 给 MySQL 数据 库 加 密 


MySQL 数据 库 是 存在 于 网 络 上 的 数据 库 系统 ， 只 要 是 网 络 用 户 ， 都 可 以 连接 到 这 个 资 
源 ， 如 果 没 有 权限 或 其 他 措施 ， 任 何人 都 可 以 对 MySQL 数据 库 进行 存 取 。MySQL 数据 库 在 
安装 完毕 后 ， 默 认 是 完全 不 设防 的 ， 也 就 是 说 任何 人 都 可 以 不 使 用 密码 就 连接 到 MySQL 数 
据 库 ， 这 是 一 个 相当 危险 的 安全 漏洞 。 


1. phpMyAdmin 管理 程序 的 安全 考虑 


phpMyAdmin 是 一 套 网 页 界面 的 MySQL 管理 程序 ， 有 许多 PHP 的 程序 设计 师 都 会 将 这 
套 工具 直接 上 传 到 他 的 PHP 网 站 文件 夹 里 ， 管 理 员 只 能 从 远 端 通过 浏览 器 登录 phpMyAdmin 
来 管理 数据 库 。 

这 个 方便 的 管理 工具 是 否 也 是 方便 的 入 侵 工具 呢 ? 没 错 ， 只 要 是 对 phpMyAdmin 管理 较 
为 熟悉 的 朋友 ， 看 到 该 网 站 是 使 用 PHP+MySQL 的 互动 架构 ， 都 会 去 测试 该 网 站 
phpMyAdmin 的 文件 夹 是 否 安装 了 phpMyAdmin 管理 程序 ， 若 是 网 站 管理 员 一 时 疏忽 ， 很 容 
易 让 人 猜 中 ， 进 入 该 网 站 的 数据 库 。 


2. 防 堵 安 全 漏洞 的 建议 


无 论 是 MySQL 数据 库 本 身 的 权限 设置 ， 还 是 phpMyAdmin 管理 程序 的 安全 漏洞 ， 为 了 
避免 他 人 通过 网 络 入 侵 数据 库 ， 必 须要 先 做 以 下 几 件 事 。 

(1) 修改 phpMyAdmin 管理 程序 的 文件 夹 名 称 。 这 个 做 法 虽然 简单 ， 但 至 少 已 经 挡 掉 一 
大 半 非 法 入 侵 者 了 。 最 好 是 修改 成 不 容易 猜 到 ， 与 管理 或 是 MySQL、phpMyAdmin 等 关键 字 
无 关 的 文件 夹 名 称 。 

(2) 为 MySQL 数据 库 的 管理 账号 加 上 密码 。 曾 一 再 提 到 MySQL 数据 库 的 管理 账号 root 
默认 是 不 设 任何 密码 的 ， 这 就 好 像 装 了 安全 系统 ， 却 没 打开 电源 开关 一 样 ， 所 以 ， 蔡 root 加 
上 密码 是 相当 重要 的 。 

(3) 养 成 备份 MySQL 数据 库 的 习惯 。 当 用 户 一 旦 所 有 安全 措施 都 失效 了 ， 若 平常 就 有 
备份 的 习惯 ， 即 使 数据 被 删除 了 ， 也 能 很 轻松 地 恢复 。 


3. 为 MySQL 管理 账号 加 上 密码 


在 MySQL 数据 库 中 的 管理 员 账 号 为 root， 为 了 保护 数据 库 账号 的 安全 ， 可 以 为 管理 员 账 
号 加 密 。 具体 的 操作 步骤 如 下 。 
EC 进入 phpMyAdmin 的 管理 主 界面 ， 单 击 【 权 限 】 文 字 链 接 ， 来 设置 管理 员 账 号 





的 权限 ， 如 图 14-73 所 示 。 

EC 这 里 有 两 个 root 账号 ， 分 别 为 由 本 机 (localhost) 进 入 和 所 有 主机 进入 的 管理 账 
号 ， 默 认 没 有 密码 。 首 先 修改 所 有 主机 的 密码 ， 单 击 【 编 辑 权限 】 链 接 ， 进 入 下 一 
页 ， 如 图 14-74 所 示 。 
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且 户 机。 实生 EBLE 
eo 27001 半日 
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表 控 作 右 热 夫 型 。 排序 | 去 总 
日 wwe ELEPIET ET 晤 且 98-mv0 Tea 入 
1 张大。 总 计 § nnoDB latint_swedish ci 16 0 
加 证 
个 同 全 过 造 中 夺 息 末 如 用 户 
14-73 ”设置 管理 员 密码 14-74 ”查看 用 户 界 面 


EEJRS 在 打开 的 界面 中 的 【密码 】 文 本 框 中 输入 所 要 使 用 的 密码 ， 如 图 14-75 所 示 。 单 
击 【执行 】 按 钮 ， 即 可 添加 密码 。 





Ey 
on 
EB: | 里 白山 入， 
SRMEAK: ONMysoL41+ 
让 MsQL40 甫 划 
ED | 
A 
图 14-75 添加 密码 


pr 在 修改 完毕 之 后 重新 登录 管理 界面 ， 就 可 以 正常 使 用 MySQL 数据 库 的 资源 
 。 了 。 修 改过 数据 库 密码 之 后 ， 需 要 同时 修改 网 站 的 数据 库 连 接 设 置 ， 详 细 步 骤 可 
参考 第 14.3.2 小 节 中 的 介绍 ， 设 置 root 密码 为 相应 密码 即 可 。 


14.6 疑难 解 惑 


疑问 1: 预览 网 页 时 提示 如 图 14-76 所 示 的 警告 信息 ， 如 何 解决 ? 
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图 14-76 ”警告 信息 
答 : 出 现 上 面 警告 信息 ， 主 要 是 因为 从 MySQL5.5 版 本 开始 ， 提 示 用 户 mysql_connect 这 
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个 模块 将 在 未 来 弃 用 ， 请 使 用 mysqli 或 者 PDO 来 替代 。 用 户 可 以 使 用 以 下 几 种 方法 之 一 来 
解决 。 

(1) 禁止 PHP 报错 。 

在 PHP 的 设置 文件 php.ini 中 将 报错 取消 ， 在 该 文件 中 找到 display_errors = On， 修 改 为 
display_errors = Off。 修 改 后 需要 重新 启动 服务 器 才能 生效 。 

(2) 修改 连接 语句 。 

将 类 似 以 下 连接 语句 : 


$link = mysql connect('localhost', 'user', 'password'); 
mysql select db('dbname', $1link); 


修改 如 下 : 


$link = mysqli connect('localhost', 'user', 'password', 'dbname'); 


(3) 设置 报警 级 别 。 





EA: 





在 PHP 程序 中 添加 以 下 代码 ， 从 而 设置 报警 级 别 : a 
<?php 革 所 二: 
error reporting(E ALL ^ E DEPRECATED); 讽 8 


疑问 2: 如 何 导出 指定 的 数据 表 ? 


答 : 如 果 用 户 想 导出 指定 的 数据 表 ， 在 选择 导出 方式 
时 ， 选 择 【 自 定义 -显示 所 有 可 用 的 选项 】， 然 后 在 【数据 


表 】 列 表 中 选择 需要 导出 的 数据 表 即 可 ， 如 图 14-77 所 示 。 国光 生生 昌文 
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第 15 章 
综合 应 用 秦 例 1 


一 一 开发 网 站 用 户 
管理 系统 


在 动态 网 站 中 ， 用 户 管理 系统 是 非常 必要 的 ， 因 为 网 站 会 员 的 收集 与 数据 使 
用 ， 不 仅 可 以 让 网 站 累积 会 员 人 脉 ， 利 用 这 些 会 员 的 数据 ， 也 可 能 为 网 站 带 来 无 限 
的 商机 。 一 个 典型 的 网 站 会 员 管 理 系统 ， 一 般 应 该 具备 用 户 注 册 功 能 、 资 料 修 改 功 
能 、 取 回 密码 功能 以 及 用 户 注 销 身份 功能 等 。 


Dreamweaver CC 动态 网 站 开发 
案例 课堂 (第 2 版 ) 罗 一 


15.1 系统 的 功能 分 析 


在 开发 动态 网 站 之 前 ， 需 要 规划 系统 的 功能 和 各 个 页 面 之 间 的 关系 ， 绘 制 出 系统 脉络 
图 ， 这 样 方便 后 面 整个 系统 的 开发 与 制作 。 


15.1.1 规划 网 页 结构 和 功能 
本 章 将 要 制作 的 用 户 管理 系统 的 网 页 及 网 页 结构 列表 如 图 15-1 所 示 。 


用 户 管理 系统 

















































































index.php 
用 户 登 录 模块 找 回 密码 修改 资料 模块 

loginfail.php welcome.php 

lostpassword.php userupdate.php 
新 用 户 注册 页 面 I 
Tegister-php showquestion php userupdateok.php 
一 
regfail.php regok.php showpassword.php logoot.php 



































图 15-1 系统 结构 框图 


本 系统 的 主要 结构 分 为 用 户 登录 和 找 回 密码 两 个 部 分 ， 整 个 系统 中 共有 12 个 页 面 ， 各 个 
页 面 的 名 称 和 对 应 的 文件 名 、 功 能 如 表 15-1 所 示 。 


表 15-1 用 户 管理 系统 网 页 设计 表 















































页 面 名 称 功 能 
index.ph 实现 用 户 管理 系统 的 登录 功能 的 页 面 
welcome ph] 用 户 登 录 成 功 后 显示 的 页 面 
loginfail php 用 户 登 录 失 败 后 显示 的 页 面 
register.php 新 用 户 用 来 注册 输入 个 人 信息 的 页 面 
regok php 新 用 户 注册 成 功 后 显示 的 页 面 
regfail php 新 用 户 注册 失败 后 显示 的 页 面 
lostpassword.php 丢失 密码 后 进行 密码 查询 使 用 的 页 面 
showquestion.php 查询 密码 时 输入 提示 问题 的 页 面 
showpassword.php 答对 查询 密码 问题 后 显示 的 页 面 
userupdate.php 修改 用 户 资料 的 页 面 
Userupdateok- 成 功 更 新 用 户 资料 后 显示 的 页 面 
logoot.ph] 退出 用 户 系统 的 页 面 


15.1.2 页面 设计 规划 


本 实例 整体 框架 比较 简单 ， 规 划 站 点 文件 和 文件 夹 如 图 15-2 所 示 。 初 学 者 在 设计 制作 过 
程 中 ， 可 以 打开 资源 文件 中 的 素材 ， 找 到 相关 站 点 的 images( 图 片 ) 文 件 夹 ， 其 中 放置 了 已 经 
编辑 好 的 图 片 。 
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图 15-2 规划 站 点 文件 和 文件 夹 N 
15.1.3 ”网 页 美工 设计 


本 实例 整体 框架 采用 “拐角 型 ”布局 结构 ， 美 工 设计 效果 如 图 15-3 和 图 15-4 所 示 。 初 学 
者 在 设计 制作 过 程 中 ， 可 以 打开 资源 文件 中 的 源 代码 ， 找 到 相关 站 点 的 images( 图 片 ) 文 件 夹 ， 
其 中 放置 了 已 经 编辑 好 的 图 片 。 


让 食堂 采购 更 加 简单 










6 给 上 J 各 线 下 了 
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安全 /方便 /放心 避 
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四 A Mare © un On 本 


15-3 首页 的 美工 15-4 会 员 注册 页 面 的 美工 


15.2 ”数据 库 设 计 与 连接 


本 节 主 要 讲述 如 何 使 用 phpMyAdmin 建立 用 户 管理 系统 的 数据 库 ， 如 何 使 用 Dreamweaver 
在 数据 库 与 网 站 之 间 建 立 动态 链接 。 


. 
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15.2.1 数据 库 设 计 


通过 对 用 户 管理 系统 的 功能 分 析 发 现 ， 这 个 数据 库 应 该 包括 注册 的 用 户 名 、 注 册 密 码 以 


及 个 人 信息 ， 如 性 别 、 年 龄 、 
表 ， 称 之 为 “用 户 信息 表 ”， 
构 如 表 15-2 所 示 。 


用 户 编号 [pe 
用 户 账 号 


用 户 密码 


[| 
密码 遗失 提示 问题 | question | vARCHARG0) | 
密码 提示 问题 答案 ”| answer 。 | vARcHaRso | 
ia | 


20 
20. 
VAROC) 50 
VAROC) $50 
真实 姓名 i 
2 
VARC 100. 
VAROC 100. 
VAROC 50) 


用 户 性 别 [sx | wangchao | 
用 户 地 址 
联系 电话 


OICQ 
邮箱 地 址 


字段 
[a 
[oo | 


字段 描述 数据 类 型 
用 户 权 限 VARCHAR(4 





E-mail、 电 话 等 。 所 以 在 数据 库 中 必须 包含 一 个 容纳 上 述 信息 的 
本 案例 将 数据 库 命名 为 member， 创 建 的 用 户 信息 表 member 结 


表 15-2 用 户 数 据 库 设 计 表 member 


HH 


| 


VARCHAR 


创建 数据 库 的 操作 步骤 如 下 。 
EEC 启动 phbppMyAdmin， 在 主 界面 的 左 侧 列表 中 单 击 New 链接 ， 如 图 15-5 所 示 。 


phpMyAdmin 
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15-5 ” phpMyAdmin 的 工作 界面 


EEC 在 文本 框 中 和 输入 要 创建 数据 库 的 名 称 member， 然 后 单 击 【 创 建 】 按 钮 ， 如 


图 15-6 所 示 。 





mysql wampserver 








回 数据 库 辑 SQL 局 状态 号 用 户 慎 员 昌 SA 史 放 村 


局 新建 数据 库 加 
[member | | 排序 规则 习 (创建 




















15-6 ”创建 数据 库 member 


接着 就 要 回 到 phpMyAdmin 的 管理 界面 ， 为 MySQL 中 的 member 数据 库 添加 数 
据 表 。 在 左 侧 列表 中 选择 创建 的 member 数据 库 ， 然 后 在 右 侧 的 页 面 中 输入 添加 的 
数据 表 【 名 字 】 和 【字段 数 】， 单 击 【 执 行 】 按 钮 ， 如 图 15-7 所 示 。 


phpMuAdmin “| -IE 
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图 15-7 新 建 数据 表 member 
EEC 请 按照 表 15-2 的 内 容 设 置 数 据 表 ， 添 加 的 数据 表 字段 如 图 15-8 所 示 。 
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15-8 ”添加 数据 表 字 段 


EED 在 设置 完毕 之 后 ， 单 击 【 保 存 】 按 钮 ， 即 可 查看 member 数据 表 ， 如 图 15-9 
所 示 。 
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mysql wampserver » 血 孝 据 库 - member > 图 








转 济 鉴 驻 结 购 同 SQL 也 搜 索 驴 括 XA 局 SU 司 导 A ao 权限 注 
# 名 字 类 型 排序 规则 属性 空 默认 格外 操作 
1 int(8) UNSIGNED 否 无 AUTO INCREMENT 只 修改 
2 username varchar(20) gb2312_chinese_ci 否 无 7 修改 

3 password varchar(20) gb2312_chinese ci 否 无 修改 

4 question varchar(50) gb2312_chinese_ci 否 天 修改 

5 answer varchar(50) gb2312_chinese_ci 否 无 路 修 改 

6 truename varchar(20) gb2312_chinese_ci 否 天 do 修改 

7 sex varchar(2) ”9b2312_chinese ci 否 无 鹃 修改 

8 address varchar(100) gb2312_chinese_ci 否 无 修改 

9 tel varchar(100) gb2312_chinese_ci 否 天 妇 修 必 

10 aa varchar(100) gb2312_chinese_ci 是 NULL 7 修 隐 

加 11 e-mail varchar(50) gb2312_chinese_ci 是 NULL 修改 

12 authority varchar(4) gb2312_chinese_ di 否 无 7 修 也 


15-9 member 数据 表 


EEDUD 过 择 member 数据 表 ， 单 击 菜单 上 的 【插入 】 链 接 。 依 照 字段 的 顺序 ， 将 对 应 的 
数值 依次 输入 ， 单 击 【 执 行 】 按 钮 ， 即 可 插入 数据 ， 如 图 15-10 所 示 。 























亨 委 因 型 朱 娄 空 全 
DR 四 所 
usemame varcharl20) | Ee 
pusmord varcher0) 国 
Mesbon radarl50) | 从 的 所 是 了。 
ansawer 。 varcherl50) ET 
noneme vorchert20) | i 
es ee 司 ”大 
addoee varehar(100) | 国 | ”本 E 
en 加 ”后 二 
oa Varchar(100) | 局 13223345 
al varcharls0) 加 日 eaeiaen ] 
ahority varchan(4) | 1 
图 15-10 插入 数据 
按照 图 15-11 所 示 的 数据 ， 重 复 执行 上 一 步 的 操作 ， 将 数据 输入 到 数据 表 中 。 
ID username password question answer truename sex address tel Qa e-mail authority 


24 admin 123456 你 最 好 的 朋友 是 ?| 我 朋友 叫 小 李 admin 男 北京 海 定 区 13012345678 11223345 admin@163.com 1 | 

29 李 劳 123456 | 休 最 好 的 朋友 是 |E™ 王 % 男 “北京 多 水 区 13112345678 23232323 李 芳 @163.com 有 

31 张 恒 123456 你 最 好 的 朋友 是 ?高尚 高 尚 男 | 上 海岭 南 区 13512345678 56421354 | 张 醒 163@163 .com 0 | 

也 | 出。 |123456 “信服 好 的 朋友 是 4 | 呈 字 刘 肌 。。 女 《郑州 中 原 区 13712345678 54637944 刘 新 有 

33| 4 张 123456 | 你 最 好 的 朋友 是 ? | 小 简 天 元 ”| 男 | 河南 郑州 | 13812345678 | 32751489 | 625948078@qq com 0 
15-11 向 member 表 中 输入 记录 


15.2.2 ”创建 数据 库 连 接 


数据 库 编 辑 完成 后 ， 必 须 在 Dreamweaver CC 中 建立 数据 源 连接 对 象 。 这 样 做 的 目的 是 方 
便 在 动态 网 页 中 使 用 前 面 建立 的 信息 系统 数据 库 文 件 和 动态 地 管理 信息 数据 。 

EEIoDgp 根据 前 面 讲 过 的 站 点 设置 方法 ， 设 置 好 “站 点 ”“ 文 档 类 型 ”“ 测 试 服务 
器 ”。 打 开创 建 的 index.php 页 面 ， 选 择 【 窗 口 】 一 【数据 库 】 菜 单 命 令 ， 进 入 【 数 
据 库 】 面 板 。 单 击 【 数 据 库 】 面 板 中 的 地 按钮 ， 弹 出 图 15-12 所 示 的 下 拉 菜 单 ， 选 
择 【MySQL 连接 】 命 令 。 

EEC) 进入 【MySQL 连接 】 对 话 框 后 ， 输 入 自 定 义 的 【连接 名 称 】 为 user， 输 入 
MySQL 服务 器 的 【用 户 名 】 和 【密码 】， 单 击 【选取 】 按 钮 来 选取 连接 的 数据 库 ， 
如 图 15-13 所 示 。 





图 浇 崩 夏河 民 恒 旧书 一 一 宣 兴 珂 刁 落 状 ” 册 9 小 鲁 





连接 名 称 : iuser 
WNSQL 服务 器 : localhost | 
用 户 名 : [root] 














上 上 

















数据 库 - | 选取 
4 单 击 上 面 的 + 按 要 创建 连接 。 








图 15-12 ”连接 数据 库 图 15-13 【MySQL 连接 】 对 话 框 


国 于 BY 打开 【选取 数据 库 】 对 话 框 ， 选 择 member 数据 库 ， 单 击 【 确 定 】 按 钮 ， 如 
图 15-14 所 示 。 

EEJR 返回 到 【MySQL 连接 】 对 话 框 后 ， 单 击 【 确 定 】 按 钮 。 回 到 Dreamweaver CC 
后 ， 可 以 打开 【数据 库 】 面 板 ，member 数据 库 的 数据 表 在 连接 设置 后 已 经 读 入 
Dreamweaver CC 了 ， 如 图 15-15 所 示 。 



































at on schon 三 
k 攻 现 梧 
oem 
15-14 【选取 数据 库 】 对 话 框 15-15 【数据 库 】 面 板 


EEIDy 同时 ， 在 网 站 根 目录 下 将 会 自动 创建 名 为 Connections 的 文件 夹 ， 该 文件 夹 内 有 
一 个 名 为 user.php 的 文件 ， 打 开 该 文件 ， 切 换 到 【代码 】 视 图 ， 添 加 以 下 代码 : 


mysql query("set character set 'gb2312'");// 读 数据 库 编码 
mysql_query ("set names 'gb2312'");// 写 数据 库 编码 


27@ 


Dreamweaver CC 动态 网 站 开发 
案例 课堂 (第 2 版 ) 罗 一 


添加 效果 如 图 15-16 所 示 。 


er = 

9 $user = mysql_pconnect($hostname_user, $username_user, 
S$password_user) or trigger_error(mysq 

© mysql_query("set character set 'gb231: 
Tt names 'gb2312'");// 写 
> 











15-16 添加 代码 


ED 在 Dreamweaver CC 界面 中 选择 【文件 】 一 【保存 】 菜 单 命 令 ， 保 存 该 文档 ， 完 
成 数据 库 的 连接 。 


15.3 用 户 登 录 模 块 的 设计 


本 节 主 要 介绍 用 户 登 录 模块 的 制作 ， 在 该 模块 中 ， 包 括 登 录 页 面 、 登 录 成 功 页 面 与 登录 
失败 页 面 3 个 页 面 的 制作 。 


15.3.1 登录 页 面 


在 用 户 访问 用 户 管理 系统 时 ， 首 先 要 进行 身份 验证 ， 这 个 功能 要 靠 登录 页 面 来 实现 。 所 
以 登录 页 面 中 必须 有 要 求 用 户 输 入 用 户 名 和 密码 的 文本 框 ， 以 及 输入 完成 后 进行 登录 的 【 登 
录 】 按 钮 和 输入 错误 后 重新 设置 用 户 名 和 密码 的 【 重 置 】 按 钮 。 

制作 登录 页 面 的 操作 步骤 如 下 。 

EEJDp index.php 页 面 是 用 户 登 录 系 统 的 首页 ， 打 开 前 面 创 建 的 index.php 页 面 ， 输 入 网 

页 【标题 】 为 “网 上 菜市 场 ”， 然 后 选择 【文件 】 一 【保存 】 菜 单 命令 将 网 页 标题 
保存 ， 如 图 15-17 所 示 。 








LA 二 拆 分 [设计 ] 实时 视图 俐 。 标题 : 网 上 菜市 场 | 姓 








15-17 创建 index.php 页 面 


EEJRP) 选择 【修改 】 一 【页 面 属性 】 菜 单 命令 ， 在 【背景 颜色 】 文 本 框 中 输入 颜色 值 
为 #cccccce， 在 【上 边 距 】 文 本 框 中 输入 0 像素 ， 这 样 设置 的 目的 是 为 了 让 页 面 的 第 
一 个 表格 能 置顶 到 上 边 ， 设 置 如 图 15-18 所 示 。 

EEJRUS 设置 完成 后 单 击 【 确 定 】 按 钮 ， 进 入 文档 窗口 ， 选 择 【 插 入 】 一 【表格 】 菜 单 
命令 ， 打 开 【 表 格 】 对 话 框 ， 在 【 行 数 】 文 本 框 中 输入 需要 插入 表格 的 行 数 ， 这 里 
输入 “3”， 在 【 列 】 文 本 框 中 输入 需要 插入 表格 的 列 数 ， 这 里 输入 “3”， 在 【 表 
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格 宽度 】 文 本 框 中 输入 775 像素 ， 
都 为 0， 如 图 15-19 所 示 。 

EC 单 击 【 确 定 】 按 钮 ， 这 样 就 在 文档 窗口 中 插入 了 一 个 3 行 3 列 的 表格 。 将 光标 
放置 在 第 1 行 表格 中 ， 在 【属性 】 面 板 中 单 击 【合并 所 选单 元 格 ， 使 用 跨度 】 按 钮 
回 ， 将 第 1 行 表格 合并 ， 再 选择 【插入 】 一 【图 像 】 菜 单 命令 ， 打 开 【 选 择 图 像 源 
文件 】 对 话 框 ， 在 站 点 images 文件 夹 中 选择 图 片 01.gif， 如 图 15-20 所 示 。 


【边框 粗细 】【 单 元 格 边 距 】 和 【单元 格 间 距 】 
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15-18 【页 面 属性 】 对 话 框 
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图 15-19 【表格 】 对 话 框 图 15-20 【选择 图 像 源 文件 】 对 话 杠 


EECDRD 单 击 【确定 】 按 钮 ， 即 可 在 表格 中 插入 此 图 片 ， 将 光标 放置 在 第 3 行 表格 中 ， 
在 【属性 】 面 板 中 单 击 【 合 并 所 选单 元 格 ， 使 用 跨度 】 按 钮 回 ， 将 第 3 行 所 有 单元 
格 合并 ， 再 选择 【插入 】 一 【图 像 】 菜 单 命令 ， 打 开 【 选 择 图 像 源 文件 】 对 话 框 ， 
在 站 点 images 文件 夹 中 选择 图 片 05.gif， 插 入 一 张 图 片 ， 效 果 如 图 15-21 所 示 。 
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15-21 ”插入 图 片 效 果 
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和 Dreamweaver CC 动态 网 站 开发 
案例 课堂 (第 2 版 ) 风 一 


EEDRD 插入 图 片 后 ， 选 择 插入 的 整个 表格 ， 在 【属性 】 面 板 的 【对 齐 (A)】 下 拉 列 表 框 
中 选择 【居中 对 齐 】 选 项 ， 让 插入 的 表格 居中 对 齐 ， 如 图 15-22 所 示 。 
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图 15-22 设置 居中 对 齐 
ED 把 光标 移 至 创建 表格 的 第 2 行 第 1 列 中 ， 在 【属性 】 面 板 中 设置 高 度 为 456 像 


NN 素 ， 宽 度 为 195 像素 ， 设 置 高 度 和 宽度 是 根据 背景 图 像 而 定 ， 在 【垂直 (T)】 下 拉 列 

表 框 中 选择 【顶端 〗， 再 将 光标 移 至 这 一 列 中 ， 单 击 Es 按钮 ， 在 <td></td> 之 间 输 
入 background="wimages/02.gif'， 设 置 成 这 一 列 中 的 背景 图 像 。 该 站 点 中 images 文件 
夹 中 的 02.gif 文件 ， 效 果 如 图 15-23 所 示 。 
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15-23 ”插入 图 片 的 效果 


EEJep 在 表格 的 第 2 行 第 2 列 和 第 3 列 中 ， 分 别 插入 同 站 点 images 文件 夹 中 的 图 片 
03.gif 和 04.gif， 完 成 网 页 的 结构 搭建 ， 如 图 15-24 所 示 。 

EC 单 击 第 2 行 第 1 列 单元 格 ， 然 后 再 单 击 文档 窗口 上 的 拆 分 按钮 ， 进 入 文档 窗口 
的 【 拆 分 】 窗 口 模式 ， 在 <td> 和 </td> 之 间 输 入 valign="top"( 表 格 文字 和 图 片 的 相对 
摆 放 位 置 ， 可 选 值 为 ttp、middle、bottom， 其 中 valign="top" 表示 单元 格 内 容 位 于 
本 单元 格 的 上 部 ; valign="middle" 表 示 单 元 格 内 容 位 于 本 单元 格 的 中 部 ; 
valign="bottom" 表 示 单 元 格 内 容 位 于 本 单元 格 的 底部 ) 命 令 ， 表 示 让 光标 能 够 自动 地 
贴 至 该 单元 格 的 最 项 部， 设置 如 图 15-25 所 示 。 
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15-24 ”完成 的 网 页 背景 效果 


text-align: center; 





图 15-25 设置 单元 格 的 对 齐 方式 为 上 部 


臣 [DY 单 击 文档 窗口 上 的 【设计 】 按 钮 ， 返 回 【 设 计 】 视 图 中 ， 将 光标 放置 在 刚 创 建 
的 表格 中 ， 然 后 选择 【插入 】 一 【表单 】 一 【表单 】 菜 单 命令 ， 如 图 15-26 所 示 ， 
插入 一 个 表单 。 

EEC 将 光标 放置 在 该 表单 中 ， 选 择 【 插 入 】 一 【表格 】 菜 单 命令 ， 打 开 【 表 格 】 对 
话 框 ， 在 【 行 数 】 文 本 框 中 输入 5， 在 【 列 】 文 本 框 中 输入 2， 在 【表格 宽度 】 文 本 
框 中 输入 179 像素 ， 在 该 表单 中 插入 5 行 2 列 的 表格 ， 如 图 15-27 所 示 。 

PY 单 击 并 拖 动 鼠标 分 别 选 择 第 1 行 和 第 4 行 表格 ， 并 分 别 在 【属性 】 面 板 中 单 击 
【合并 所 选单 元 格 ， 使 用 跨度 】 按 钮 下， 将 这 几 行 表格 进行 合并 。 然 后 在 表格 的 第 
1 行 中 输入 文字 “用 户 登 录 ”， 并 在 【属性 】 面 板 中 设置 该 文字 的 大 小 、 颜 色 以 及 
单元 格 的 背景 颜色 等 ， 如 图 15-28 所 示 。 

EEJE) 在 表格 第 2 行 第 1 列 中 输入 文字 “用 户 名 ”。 将 光标 定位 在 第 2 行 第 2 列 中 ， 
选择 【插入 】 一 【表单 】 一 【文本 域 】 菜 单 命 令 ， 插 入 一 个 单行 文本 域 表 单 对 象 ， 
并 定义 【文本 域 】 名 为 usemame， 文 本 域 属性 设置 及 此 时 的 效果 如 图 15-29 所 示 。 
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15-26 ”选择 【表单 】 菜 单 命令 15-27 插入 表格 
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图 15-28 【属性 】 面 板 
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E. 
图 15-29 输入 用 户 名 和 插入 文本 域 的 设置 

设置 文本 域 的 属性 说 明 如 下 。 

@ 【文本 域 】 文 本 框 。 在 【文本 域 】 文 本 框 中 ， 为 文本 域 指定 一 个 名 称 。 每 个 文本 域 都 
必须 有 一 个 唯一 名 称 。 表 单 对 象 名 称 不 能 包含 空格 或 特殊 字符 。 可 以 使 用 字母 、 数 
字 、 字 符 和 下 画 线 (_) 的 任意 组 合 。 请 注意 ， 为 文本 域 指定 的 标签 是 将 存储 该 域 的 值 
(输入 的 数据 ) 的 变量 名 ， 这 是 发 送 给 服务 器 进行 处 理 的 值 。 

e 【字符 宽度 】。【 字 符 宽度 】 设 置 域 中 最 多 可 显示 的 字符 数 。 


e@ 【最 多 字符 数 】。【 最 多 字符 数 】 指 定 在 域 中 最 多 可 输入 的 字符 数 ， 如 果 保 留 为 空 
白 ， 则 输入 不 受 限制 。 


e@ 【类 型 】。 【类 型 】 用 于 指定 文本 域 是 “单行 ”“ 多 行 ” 还 是 “密码 ” 域 。 单 行文 本 
域 只 能 显示 一 行文 字 ;， 多 行 则 可 以 输入 多 行文 字 ， 达 到 字符 宽度 后 换行 ， 密 码 文本 


i 


域 则 用 于 输入 密码 。 

e 【初始 值 】。【 初 始 值 】 指 定 在 首次 载 入 表单 时 域 中 显示 的 值 。 例 如 ， 通 过 包含 说 明 
或 示例 值 。 可 以 指示 用 户 在 域 中 输入 信息 。 

e@ 【类 】。【 类 】 可 以 将 CSS 规则 应 用 于 对 象 。 

EC 在 第 3 行 第 1 列表 格 中 输入 文字 “登录 密码 ”， 将 光标 定位 在 第 3 行 表格 的 第 2 
列 中 ， 选 择 【 插 入】 一 【表单 】 一 【文本 域 】 菜 单 命 令 ， 揪 入 密码 文本 域 表 单 对 
象 ， 定 义 【 文 本 域 】 名 为 password。 文 本 域 属 性 设置 及 此 时 的 效果 如 图 15-30 所 示 。 
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图 15-30 密码 文本 域 的 设置 
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EECDB 选择 第 4 行 单元 格 ， 选 择 【 插 入 】 一 【表单 】 一 【按钮 】 菜 单 命令 两 次 ， 插 入 
两 个 按钮 ， 并 分 别 在 【属性 】 面 板 中 进行 属性 变更 ， 一 个 为 登录 时 用 的 【提交 表 
单 】 选 项 ， 一 个 为 【 重 设 表单 】 选 项 ， 属 性 的 设置 如 图 15-31 所 示 。 





值 QI 障 录 _ | 动作 回 提交 表单 6) 口 无 员 类 中 无 
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15-31 设置 按钮 名 称 


OB 合并 第 5 行 单元 格 ， 在 第 5 行 输入 “注册 新 用 户 ” 文 本 ， 并 选中 这 几 个 字 ， 然 
后 在 窗口 中 选择 【插入 】 一 【超级 链接 】 菜 单 命令 ， 打 开 Hyperlink 对 话 框 ， 在 其 中 
将 【目标 】 设 置 为 blank， 这 样 可 以 在 新 窗口 中 打开 页 面 ， 然 后 设置 【链接 】 对 象 
为 用 户 注册 页 面 registerphp， 以 方便 用 户 注 册 ， 输 入 的 效果 如 图 15-32 所 示 。 

EEDD9 如 果 已 经 注册 的 用 户 忘记 了 密码 ， 还 希望 以 其 他 方式 能 够 重新 获得 密码 ， 可 以 
在 表格 的 第 4 列 中 输入 “ 找 回 密码 ”文本 ， 并 设置 一 个 转 到 密码 查询 页 面 
lostpassword.php 的 链接 对 象 ， 方 便 用 户 取 回 密码 ， 如 图 15-33 所 示 。 


3@ 
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15-32 ”建立 链接 


;| Hyperink x 
































图 15-33 ”密码 查询 设置 


EEQE》 表单 编辑 完成 后 ， 下 面 来 编辑 该 网 页 的 动态 内 容 ， 使 用 户 可 以 通过 该 网 页 中 的 


表单 实现 登录 功能 。 打 开 【 服 务 器 行为 】 面 板 ， 单 击 该 面板 上 的 外 按钮 ， 选 择 【 用 
户 身份 验证 】 一 【登录 用 户 】 命 令 ， 如 图 15-34 所 示 ， 向 该 网 页 添加 “登录 用 户 ” 
的 服务 器 行为 。 


EEDIB》 此 时 ， 打 开 【 登 录用 户 】 对 话 框 ， 在 该 对 话 框 中 进行 以 下 设置 。 


从 【从 表单 获取 输入 】 下 拉 列 表 框 中 选择 该 服务 器 行为 使 用 网 页 中 的 forml 对 象 ， 
设 定 该 用 户 登 录 服 务 器 行为 的 用 户 数 据 来 源 为 表单 对 象 中 访问 者 填写 的 内 容 。 

从 【用 户 名 字段 】 下 拉 列 表 框 中 选择 文本 域 usemame 对 象 ， 设 定 该 用 户 登录 服务 器 
行为 的 用 户 名 数据 来 源 为 表单 的 username 文本 域 中 访问 者 输入 的 内 容 。 

从 【密码 字段 】 下 拉 列 表 框 中 选择 文本 域 password 对 象 ， 设 定 该 用 户 登 录 服 务 器 行 
为 的 用 户 名 数据 来 源 为 表单 的 password 文本 域 中 访问 者 输入 的 内 容 。 

从 【使 用 连接 验证 】 下 拉 列 表 框 中 选择 用 户 登录 服务 器 行为 使 用 的 数据 源 连接 对 象 
为 user。 

从 【表格 】 下 拉 列 表 框 中 选择 该 用 户 登 录 服 务 器 行为 使 用 到 的 数据 库 表 对 象 为 
member。 

从 【用 户 名 列 】 下 拉 列 表 框 中 选择 表 member 存储 用 户 名 的 字段 为 username。 

从 【密码 列 】 下 拉 列 表 框 中 选择 表 member 存储 用 户 密码 的 字段 为 password。 

在 【如 果 登 录 成 功 ， 转 到 】 文 本 框 中 输入 登录 成 功 后 ， 转 向 welcome.php 页 面 。 

在 【如 果 登 录 失 败 ， 转 到 】 文 本 框 中 输入 登录 失败 后 ， 转 向 loginfail.php 页 面 。 

选中 【基于 以 下 项 限制 访问 】 中 的 【用 户 名 、 密 码 和 访问 级 别 】 单 选 按钮 ， 设 定 后 
将 根据 用 户 的 用 户 名 、 密 码 及 权限 级 别 共同 决定 其 访问 网 页 的 权限 。 

从 【获取 级 别 自 】 下 拉 列 表 框 中 选择 authority 字段 ， 表 示 根 据 authority 字段 的 数字 
来 确定 用 户 的 权限 级 别 。 


设置 完成 后 的 对 话 框 显示 如 图 15-35 所 示 。 
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15-34 ”添加 “登录 用 户 ” 的 服务 器 行为 15-35 【登录 用 户 】 对 话 框 名 
EED 设置 完成 后 ， 单 击 【确定 】 按 钮 ， 关 闭 该 对 话 篆 
框 ， 返 回 到 文档 窗口 。 在 【服务 器 行为 】 面 板 中 就 统 


增加 了 一 个 “登录 用 户 ” 行 为 ， 如 图 15-36 所 示 。 

EECPD 表单 对 象 对 应 的 【属性 】 面 板 的 动作 属性 值 如 
图 15-37 所 示 ， 为 <?php echo $loginFormAction: ?>。 
它 的 作用 就 是 实现 用 户 登录 功能 ， 这 是 Dreamweaver 
CC 自动 生成 的 一 个 动作 代码 。 





图 15-36 【服务 器 行为 】 面 板 


pp GG 








副 类 单 巧 hE [hp eoho lognyoraketio 9 | 本 标 加 ~ 夹 ) 无 





form - 方法 PasT - 编码 基 型 














15-37 ”表单 对 应 的 【属性 】 面 板 


EEE 选择 【文件 】 一 【保存 】 菜 单 命令 ， 将 该 文档 保存 到 本 地 站 点 中 ， 完 成 网 站 的 
如 图 15-38 所 示 。 








四 
图 15-38 首页 设计 的 最 终 效果 
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15.3.2 ”登录 成 功 和 登录 失败 页 面 的 制作 


当 用 户 输入 的 登录 信息 不 正确 时 ， 就 会 转 到 loginfailphp 页 面 ， 显 示 登 录 失 败 的 信息 。 如 
果 用 户 输入 的 登录 信息 正确 ， 就 会 转 到 welcome.php 页 面 。 


制作 登录 失败 页 面 的 操作 步骤 如 下 。 


EC 选择 【文件 】 一 【新 建 】 菜 单 命令 ， 打 开 【 新 建文 档 】 对 话 框 ， 选 择 【 空 白 
页 】 选 项 界面 【页 面 类 型 】 下 拉 列 表 框 中 的 PHP 选项 ， 在 【布局 】 列 表 框 中 选择 
【无 】 选 项 ， 然 后 单 击 【创建 】 按 钮 创建 新 页 面 ， 在 网 站 根 目 录 下 新 建 一 个 名 为 
loginfail.php 的 网 页 并 保存 ， 如 图 15-39 所 示 。 

EC 登录 失败 页 面 设计 如 图 15-40 所 示 ， 在 文档 窗口 中 选中 【这 里 】 链 接 文本 ， 加 入 
链接 index.php， 将 其 设置 为 指向 index.php 页 面 的 链接 。 

ECDIS 选择 【文件 】 一 【保存 】 菜 单 命令 ， 完 成 loginfail.php 页 面 的 创建 。 





一 wdomicl ~ « 























登录 类 败 
2 和 登录 失败 ， 请 检查 你 填写 的 用 户 名 的 密码 是 否 正确 
Ne | Ce 请 单 击 这 里 重新 登录 
图 15-39 【另存 为 】 对 话 框 图 15-40 ”登录 失败 页 面 loginfail.php 
制作 登录 成 功 页 面 的 操作 步骤 如 下 。 


EC 选择 【文件 】 一 【新 建 】 菜 单 命令 ， 打 开 【 新 建文 档 】 对 话 框 ， 选 择 【 空 白 
页 】 选 项 界面 【页 面 类 型 】 下 拉 列 表 框 中 的 PHP 选项 ， 在 【布局 】 下 拉 列 表 框 中 选 


择 【 无 】 选 项 ， 然 后 单 击 【创建 】 按 钮 创建 新 页 面 ， 在 网 站 根 目录 下 新 建 一 个 名 为 
welcome.php 的 网 页 并 保存 。 


EEJE2》 用 类 似 的 方法 制作 登录 成 功 页 面 的 静态 部 分 ， 如 图 15-41 所 示 。 


EEJRS 选择 【窗口 】 一 【 绑 定 】 菜 单 命令 ， 打 开 【 绑 定 】 面 板 ， 单 击 该 面板 上 的 外 按 


钮 ， 在 弹出 的 下 拉 菜单 中 选择 【阶段 变量 】 命 令 ， 为 网 页 中 定义 一 个 阶段 变量 ， 如 
图 15-42 所 示 。 


欢迎 你 : XXXXXX 








15-41 ”欢迎 界面 的 效果 


15-42 ”添加 阶段 变量 


【 绑 定 】 面 板 中 各 选项 的 说 明 如 下 。 

@ ”记录 集 (查询 ): 用 来 绑 定 数据 库 中 的 记录 集 ， 在 绑 定 记录 集中 选择 要 绑 
定 的 数据 源 、 数 据 库 以 及 一 些 变量 ， 用 于 记录 的 显示 和 查询 。 

@ 命令 (预存 过 程 ): 在 命令 对 话 框 中 有 更 新 、 删 除 等 命令 ， 选 择 这 个 命令 
主要 是 为 了 让 数据 库 里 的 数据 保持 最 新 状态 。 

@ “请求 变 量 : 用 于 定义 动态 内 容 源 ， 从 【类 型 〗 弹 出 菜单 中 选择 一 个 请 求 
集合 。 例 如 ， 要 访问 Request.ServerVariables 集合 中 的 信息 ， 则 选择 
【服务 器 变量 〗。 如 果 要 访问 RequestForm 集合 中 的 信息 ， 则 选择 【表单 】〗。 

@ ”阶段 交 量 : 阶段 变量 提供 了 一 种 对 象 ， 通 过 这 种 对 象 ， 用 户 信息 得 以 存 
储 ， 并 使 该 信息 在 用 户 访问 的 持续 时 间 中 对 应 用 程序 的 所 有 页 都 可 用 。 
阶段 变量 还 可 以 提供 一 种 超时 形式 的 安全 对 象 ， 这 种 对 象 在 用 户 账户 长 
时 间 不 活动 的 情况 下 ， 终 止 该 用 户 的 会 话 。 如 果 用 户 忘记 从 Web 站 点 
注销 ， 这 种 对 象 还 会 释放 服务 器 内 存 和 处 理 资源 。 

打开 【阶段 变量 】 对 话 框 。 在 【名 称 】 文 本 框 中 输入 阶段 变量 的 名 称 
MM username， 如 图 15-43 所 示 。 

EEIe 设置 完成 后 ， 单 击 【 确 定 】 按 钮 ， 在 文档 窗口 中 通过 拖 动 鼠 标 选 择 

“XXXXXX” 文 本 ， 然 后 在 【 绑 定 】 面 板 中 选择 MM_usemame 变量 ， 再 单 击 【 绑 

定 】 面 板 底部 的 【插入 】 按 钮 ， 将 其 插入 到 该 文档 窗口 中 设 定 的 位 置 。 插 入 完毕 ， 

可 以 看 到 “XXXXXX” 文 本 被 {Session.MM usermame} 占 位 符 代替 ， 如 图 15-44 所 

示 。 这 样 ， 就 完成 了 显示 登录 用 户 名 阶段 变量 的 添加 工作 。 


mn 
提示 
DS 


誉 洲 胞 吕 卫 入 二 到 淖 症 一 一 | 宣 滑 珂 岂 了 落 状 ” 册 9 小 间 























阶 和 让 变量 x 
名 称 :了 DCusernand| 确定 
了 肖 
帮助 
图 15-43 【阶段 变量 】 对 话 框 15-44 ”插入 后 的 效果 
Se 设计 阶段 变量 的 目的 ， 是 在 用 户 登 录 成 功 后 ， 登 录 界 面 中 直接 显示 用 户 的 名 


汇 。 字 ， 使 网 页 更 有 亲切 感 。 


EEJD 在 文档 窗口 中 拖 动 鼠标 选中 【注销 你 的 用 户 】 链 接 文本 。 选 择 菜单 中 的 【 窗 
口 】 一 【服务 器 行为 】 一 【用 户 身 份 验证 】 一 【注销 用 户 】 命 令 ， 为 所 选中 的 文本 
添加 一 个 注销 用 户 的 服务 器 行为 ， 如 图 15-45 所 示 。 

EC 打开 【注销 用 户 】 对 话 框 ， 在 该 对 话 框 中 进行 以 下 设置 。 

e 【在 以 下 情况 下 注销 】 用 于 设置 注销 。 本 例 选 中 【 单 击 链接 】 单 选 按钮 ， 并 在 右边 的 
下 拉 列 表 框 中 选择 【所 选 范围 : “注销 你 的 用 户 ”】 选 项 ， 这 样 当 用 户 在 页 面 中 单 
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击 【 注 销 你 的 用 户 】 时 就 执行 注销 操作 。 
@ 【在 完成 后 ， 转 到 】 文 本 框 用 于 设置 注销 后 显示 的 页 面 ， 本 例 在 右 侧 文 本 框 中 输入 
logootphp， 表 示 注 销 后 转 到 logoot.php 页 面 ， 完 成 后 的 设置 如 图 15-46 所 示 。 


Go To Detail Page 


(Go To Related Page 
竹 和 记录 





注 身 用 户 x 
U @ | 3 pr 二 LL. 
在 以 下 情况 下 注销 : 外 单 击 嵌 接 ; 所 选 范围 :“ 注 稍 你 的 用 户 到 [ 
习 | 
在 完成 后 ， 转 到 : Logoot php 


























图 15-45 选择 【注销 用 户 】 命 令 图 15-46 【注销 用 户 】 对 话 框 


EERE 设置 完成 后 ， 单 击 【确定 】 按 钮 ， 关 闭 该 对 话 框 ， 返 回 到 文档 窗口 。 在 【服务 
器 行为 】 面 板 中 增加 了 一 个 “注销 用 户 ” 行 为 ， 如 图 15-47 所 示 。 同 时 可 以 看 到 
【注销 用 户 】 链 接 文本 对 应 的 【属性 】 面 板 中 的 【链接 】 属 性 值 为 <?php echo 
$logoutAction ?>， 它 是 Dreamweaver CC 自动 生成 的 动作 对 象 。 

EEC 1ogootphp 的 页 面 设计 比较 简单 ， 不 作 详 细 说 明 ， 在 页 面 中 的 文字 “这 里 ”处 指 
定 一 个 链接 到 首页 index.php 就 可 以 了 ， 效 果 如 图 15-48 所 示 。 





口 X 
@ 由 -| 图 htpy/ocalho.. P - 上 | @ 注 钠 用 户 
文件 (篇 如 (FE) 查看 (V) 收藏 交 (A) 工具 (T) 帮助 (H) 











谢谢 你 和 访问 ! 您 已 安全 退出 ! 








轴 -文人 类 型 : FIP 重新 登录 清单 击 这 里 。 
动态 文本 (Session. MN_username) 
注销 用 户 
< > 
图 15-47 添加 注销 用 户 功能 图 15-48 ”注销 用 户 页 面 设计 效果 


国 囊 [VY 选择 【文件 】 一 【保存 】 菜 单 命令 ， 将 该 文档 保存 到 本 地 站 点 中 。 编 辑 工 作 完 
成 后 ， 就 可 以 测试 该 用 户 登 录 系统 的 选择 情况 了 。 文 档 中 的 【修改 你 的 注册 资料 】 
链接 到 userupdate.php 页 面 ， 此 页 面 将 在 后 面 的 修改 中 进行 介绍 。 


15.3.3 ”用 户 登 录 系 统 功 能 的 测试 
制作 好 一 个 系统 后 ， 需 要 测试 无 误 ， 才 能 上 传 到 服务 器 以 供 使 用 。 下 面 就 对 登录 系统 进 
行 测试 ， 测 试 的 具体 步骤 如 下 。 


EEJ 打开 正 浏览 器 ， 在 地 址 栏 中 输入 http://localhost/index.php， 打 开 index.php 页 
面 ， 如 图 15-49 所 示 。 在 【用 户 名 】 和 【登录 密码 】 文 本 框 中 输入 用 户 名 及 密码 ， 
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输入 完毕 ， 单 击 【 登 录 】 按钮 。 
EEJ29 如 果 在 第 1 步 中 填写 的 登录 信息 是 错误 的 ， 或 者 根本 就 没有 输入 ， 则 浏览 器 就 
会 转 到 登录 失败 页 面 loginfailphp， 显 示 登 录 错 误 信息 ， 如 图 15-50 所 示 。 


让 食堂 采购 更 加 阅 单 











5 妨 上 ] 旬 线 F 了 


安全 /方便 /放心 





15-49 ”打开 的 网 站 首页 图 15-50 登录 失败 页 面 loginfail.php 效果 


EEJS 如 果 输 入 的 用 户 名 和 密码 都 正确 ， 则 显示 登录 成 功 页 面 。 这 里 输入 的 是 前 面 数 
据 库 设 置 的 用 户 admin， 登 录 成 功 后 的 页 面 如 图 15-51 所 示 ， 其 中 显示 了 用 户 名 
admin 。 

EEIRD 如 果 想 注销 用 户 ， 只 需要 单 击 【 注 销 你 的 用 户 】 超 链接 即 可 ， 注 销 用 户 后 ， 浏 
览 器 就 会 转 到 页 面 logootphp， 然 后 单 击 链接 文字 【这 里 】 回 到 首页 ， 如 图 15-52 所 
示 。 至 此 ， 登 录 功 能 就 测试 完成 了 。 

让 食 全 采购 更 加 简单 了 


车 沙 崩 路 卫 :于 民 司 尖 书 一 一 上 宣 滑 珂 刁 落 辩 ” 册 9 小 全 


py A 












= 口 x 
@ -Ohtpi/ocalho.. P - 上 | 国 注 征用 户 


文件 日 ” 竟 句 (E) 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 














谢谢 你 的 访问 ! 您 已 安全 退出 ! 








re oy 重新 党 录 请 单 击 这 里 。 

SS 6 线 上 ] 货 线 F 了 人 Ee 

安全 /方便 /放心 

图 15-51 登录 成 功 页 面 Welcome php 效果 图 15-52 注销 用 户 页 面 设计 


15.4 用 户 注册 模块 的 设计 


用 户 登 录 系 统 是 供 数据 库 中 已 有 的 老 用 户 登 录用 的 ， 一 个 用 户 管理 系统 还 应 该 提供 新 用 
户 注册 用 的 页 面 ， 对 于 新 用 户 来 说 ， 通 过 单 击 index.php 页 面 上 的 【注册 新 用 户 】 超 链接 ， 进 
入 到 名 为 register.php 的 页 面 ， 在 该 页 面 可 以 实现 新 用 户 注册 功能 。 


15.4.1 ”用户 注册 页 面 
register.php 页 面 主要 实现 用 户 注册 的 功能 ， 用 户 注册 的 操作 就 是 向 member.mdb 数据 库 
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的 member 表 中 添加 记录 的 操作 。 

具体 的 操作 步骤 如 下 。 

EC 选择 【文件 】 一 【新 建 】 菜 单 命令 ， 打 开 【 新 建文 档 】 对 话 框 ， 选 择 【空白 
页 】 选 项 界面 【页 面 类 型 】 下 拉 列 表 框 中 的 PHP 选项 ， 在 【布局 】 下 拉 列 表 框 中 选 
择 【 无 】 选 项 ， 然 后 单 击 【 创 建 】 按 钮 创建 新 页 面 ， 在 网 站 根 目 录 下 新 建 一 个 名 为 
register.php 的 网 页 并 保存 。 

EC 在 Dreamweaver CC 中 使 用 制作 静态 网 页 的 工具 完成 图 15-53 所 示 的 静态 部 分 ， 
这 里 要 说 明 的 是 注册 时 需要 加 入 一 个 “隐藏 区 域 ”， 并 命名 为 authority， 设 置 默认 
值 为 0， 即 所 有 的 用 户 注册 时 默认 是 一 般 访问 用 户 。 








15-53 ”register.php 页 面 静态 设计 


ECDIS 还 需要 设置 一 个 验证 表单 的 动作 ， 用 来 检查 访问 者 在 表单 中 填写 的 内 容 是 否 满 
足 数据 库 中 表 member 中 字段 的 要 求 。 在 将 用 户 填写 的 注册 资料 提交 到 服务 器 之 
前 ， 就 会 对 用 户 填写 的 资料 进行 验证 。 如 果 有 不 符合 要 求 的 信息 ， 可 以 向 访问 者 显 
示 错 误 的 原因 ， 并 让 访问 者 重新 输入 。 

ECDIS 选择 【窗口 】 一 【行为 】 菜 单 命令 ， 打 开 【 行 为 】 面 板 ， 单 击 【 行 为 】 面 板 中 
的 辐 按 钮 ， 从 打开 的 下 拉 菜 单 中 选择 【检查 表单 】 命 令 ， 打 开 【 检 查 表单 】 对 话 框 ， 





如 图 15-54 所 示 。 

站 在 此 选择 需要 ! (aa 

! 验证 的 表单 项 上 

一 一 一 一 一 一 一 一 一 一 一 一 
! 2 选中 【必需 的 】 1 和 [村 受 ] 选项 组 
， 复 选 框 , 表示 所 选 | 1 用 于 限制 填写 内 容 ! 
A | 1 的 形式 ! 
i i i Wl 

图 15-54 【检查 表单 】 对 话 框 
-| 本 例 中 ， 设 置 username 文本 域 、password 文本 域 、passwordl 文本 域 、 
未 


外 answer 文本 域 、truename 文本 域 、address 文本 域 为 【 值 : 必需 的 〗】，【 可 接受 : 
任何 东西 】， 即 这 几 个 文本 域 必须 填写 ， 内 容 不 限 ， 但 不 能 为 空 ，tel 文 本 域 和 qq 
文本 域 设置 的 验证 条 件 为 【 值 : 必需 的 〗】，【 可 接受 : 数字 〗， 表 示 这 两 个 文本 
域 必 须 填 写 数 字 ， 不 能 为 空 ; E-mail 文本 域 的 验证 条 件 为 【 值 : 必需 的 】，【 可 
接受 : 电子 邮件 地 址 〗， 表 示 该 文本 域 必须 填写 电子 邮件 地 址 ， 且 不 能 为 空 。 


攻 于 BY 设置 完成 后 ， 单 击 【确定 】 按 钮 ， 完 成 对 验证 表单 的 设置 。 





UD 











第 
区 于 BY 在 文档 窗口 中 单 击 工具 栏 上 的 【代码 】 按 钮 ， 转 到 【代码 】 视 图 ， 然 后 在 验 i 加 
表单 动作 的 源 代码 中 加 入 以 下 代码 : 时 
<script type="text/javascript"> 并 
function MM validateForm() { //v4.0 应 
if (document.getElementById){ 用 
Var i,p,qd'nm,test,num,min,max,errors='',args=MM validateForm.arguments; 案 
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; 例 

val=document .getElementById (args [i]); 

if (val) { nm=val.name; if ((val=val.value)!="") { 
if (test.indexOof('isEmail')!=-1) { p=val.indexOof ('@'); 入 
if (p<1 || p==(val.length-1)) errors+='— '+nm+' must contain an e- 网 
mail address.\n'; 站 
} else if (test!='R') { num = parseFloat (val); 用 
if (isNaN(val)) errors+='—- '+nm+' must contain a number.\n'; A 
if (test.indexof ('inRange') != -1) { p=test.indexOof(' 六 
min=test.substring(8,p); max=test.substring (p+1); 系 
if (num<min || max<num) errors+='- '+nm+' must contain a number 统 
between '+min+' and '+max+'.\n'; 
} } } else if (test.charAt (0) == 'R') errors += !- '+nm+' is 


required.\n'; } 
} if (errors) alert('The following error(s) occurred:\n'+errors); 
document .MM returnValue = (errors == "''); 

Dy 

</script> 


把 代码 修改 如 下 : 


<script type="text/JavaScript"> 
// 宣 告 脚 本 语言 为 Javascript 
kl 
function MM findobj(n, d) { //v4.01 

Var pi,x; if(!d) d=document; if((p=n.indexof ("?") ) >0&&parent .frames . 
length) { 

d=parent.frames[n.substring (p+1)] .document; n=n.substring(0,p);} 

if(! (x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d. 
forms[i][n]; 

for (i=0; Ix&&d.layersg&i<d.layers.length;i++) x=MM findobj (n,d.layers[i]. 
document); 

if(!x && d.getElementById) x=d.getElementById(n); return x; 


// 定 义 创建 对 话 框 的 基本 属性 
function MM validateForm() { //v4.0 
Var i,pdnm,test,num,min,max,errors='',args=MM validateForm.arguments; 
// 检 查 提交 表单 的 内 容 
for (i=0; i<(args.length-2); i+=3) { test=args [i+2]; 
val=MM findobj (args [i]); 
if (val) { nm=val.name; if ((val=val.value)!="") { 
if (test.indexof('isEmail')!=-1) { p=val.indexOof ('@'); 
if (p<1 11 p==(val.length-1)) errors+='- '+nm+' 需要 输入 邮箱 地 址 .\n'; 
// 如 果 提交 的 邮箱 地 址 表单 中 不 是 邮件 格式 则 显示 为 “需要 输入 邮箱 地 址 ” 
} else if (test!='R') { num = parseFloat (val) 7 
if (isNaN (val)) errors+='- "+nmt' 需要 输入 数字 .\n'; 
// 如 果 提交 的 电话 表单 中 不 是 数字 则 显示 为 “需要 输入 数字 ” 


if (test.-indexof ('inRange') != -1) { p=test.indexOf(':'); 


pp A 
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min=test.substring(8,p); max=test-substring(P+1) 7 
if (num<min || max<num) errors+='- '+nm+' 需要 输入 数字 '+min+' and 
"TN 
W QQ 表单 中 不 是 数字 则 显示 为 “需要 输入 数字 ” 
} } else if (test.charAt(0) == 'R') errors += '— '+nm+'" 需要 输入 .\n'; 和 
如 果 提 交 的 地 十 表单 为 守则 号 寺 久 “需要 输入 ” 
} if (MM findobj('password') .value!=MM findobj ('password1') .value) errors += 
'- 两 次 密码 输入 不 一 致 \n'; 
if (errors) alert(' 注 册 时 出 现 如 下 错误 :\n'+errors); 
document .MM returnValue = (errors == "''); 
// 如 果 出 错时 将 显示 “注册 时 出 现 如 下 错误 : ” 
3 


WE 
</script> 
编辑 代码 完成 后 ， 单 击 工具 栏 上 的 【设计 】 按 钮 ， 返 回 到 [RE 人 
【设计 】 视 图 。 此 时 ， 可 以 测试 选择 的 效果 ， 当 两 次 输入 的 密码 
不 一 致 ， 单 击 【 提 交 】 按 钮 时 ， 则 会 弹出 一 个 警告 框 ， 图 15-55 
中 的 警告 框 告诉 访问 者 两 次 密码 输入 不 一 致 。 rR 
ET 在 该 网 页 中 添加 一 个 “插入 记录 ”的 服务 器 行为 。 2 
选择 【窗口 】 一 【服务 器 行为 】 菜 单 命令 ， 打 开 【 服 务 re 
器 行为 】 面 板 ， 单 击 该 面板 上 的 国 按钮 ， 在 弹出 的 下 拉 
菜单 中 选择 【插入 记录 )】 命令 ， 则 会 打开 【插入 记录 】 








对 话 框 。 在 该 对 话 框 中 进行 以 下 设置 。 AGE 

e@ 从 【连接 】 下 拉 列 表 框 中 选择 user 作为 数据 源 连接 ” 图 15-55 提示 信息 框 
对 象 。 

@ ”从 【插入 表格 】 下 拉 列 表 框 中 选择 member 作为 使 用 的 数据 库 表 对 象 。 

e@ 在 【插入 后 ， 转 到 】 文 本 框 中 设置 记录 成 功 添加 到 表 member 后 ， 转 到 regok.php 





























网 页 。 
@ ”在 对 话 框 下 半 部 分 ， 将 网 页 中 的 表单 对 象 和 数据 库 中 表 member 中 的 字段 一 一 对 应 
起 来 。 
设置 完成 后 该 对 话 框 如 图 15-56 所 示 。 
插入 记录 x 
1 1 将 表单 里 答 和 - 严 
1 入 的 数据 插入 ! -~ 
: 到 相应 的 数据 ! 1 2. 表 单 中 的 文本 ! 
上 诡 由 1 域名 称 和 要 插入 | 
El 到 的 数据 表 中 的 | 
字段 相对 应 1! 





15-56 【插入 记录 】 对 话 框 





EGR 设置 完成 后 ， 单 击 【确定 】 按 钮 ， 关 闭 该 对 话 框 ， 返 回 到 文档 窗口 。 此 时 的 设 
计 样 式 如 图 15-57 所 示 。 

















SN 


- Sg Whetona ee ee RS 
图 15-57 ”插入 记录 后 的 效果 
EECRB) 用 户 名 是 用 户 登 录 的 身份 标志 ， 用 户 名 是 不 能 够 重复 的 ， 所 以 在 添加 记录 之 





敬酒 峙 中 本末 刁 司 岩 忆 一 宇 业 酒 岂 落 装 ” 才 S 外 便 


Ce 有 ae 


前 ， 一 定 要 先 在 数据 库 中 判断 该 用 户 名 是 否 存在 ， 如 果 存 在 ， 则 不 能 进行 注册 。 在 
Dreamweaver CC 中 提供 了 一 个 检查 新 用 户 名 的 服务 器 行为 ， 单 击 【服务 器 行为 】 面 
板 上 的 此 按钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【用 户 身 份 验证 】 一 【检查 新 用 户 名 】 命 
令 ， 此 时 会 打开 【检查 新 用 户 名 】 对 话 框 ， 在 该 对 话 框 中 进行 以 下 设置 。 

@ ”在 【用 户 名 字段 】 下 拉 列 表 框 中 选择 username 字段 。 

@ ”在 【如 果 已 存在 ， 则 转 到 】 文 本 框 中 输入 regfailphp。 表 示 如 果 用 户 名 已 经 存在 ， 则 
转 到 regfail.php 页 面 ， 显 示 注册 失败 信息 ， 该 网 页 将 在 后 面 编辑 。 

设置 完成 后 的 对 话 框 如 图 15-58 所 示 。 

















检查 新 用 户 各 x 
用 户 生字 反 : Eco [| 
如 果 已 存在 ， 刚 转 到 - FesEail_ php EEE | “取消 
| 者 助 





图 15-58 【检查 新 用 户 名 】 对 话 框 
EC 设置 完成 后 ， 单 击 该 对 话 框 中 的 【确定 】 按 钮 ， 关 闭 该 对 话 框 ， 返 回 到 文档 窗 
口 。 在 【服务 器 行为 】 面 板 中 增加 了 一 个 “检查 新 用 户 名 ”行为 ， 如 图 15-59 
所 示 。 
EC 选择 【文件 】 一 【保存 】 菜 单 命令 ， 将 该 文档 保存 到 本 地 站 点 中 ， 完 成 本 页 的 
制作 。 最 终 的 效果 如 图 15-60 所 示 。 
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图 15-59 【服务 器 行为 】 面 板 图 15-60 ”注册 页 面 最 终 效果 


15.4.2 ”注册 成 功 和 注册 失败 页 面 


为 了 方便 用 户 登 录 ， 应 该 在 regok.php 页 面 中 设置 一 个 转 到 index.php 页 面 的 文字 链接 ， 
以 方便 用 户 进行 登录 。 同 时 ， 为 了 方便 访问 者 重新 进行 注册 ， 应 该 在 regfail.php 页 面 设置 一 
个 转 到 register.php 页 面 的 文字 链接 ， 以 方便 用 户 进行 重新 登录 。 
制作 显示 注册 成 功 和 失败 页 面 信息 的 操作 步骤 如 下 。 
EC 选择 【文件 】 一 【新 建 】 菜 单 命令 ， 打 开 【 新 建文 档 】 对 话 框 ， 选 择 【 空 白 
页 】 选 项 界面 【页 面 类 型 】 下 拉 列 表 框 中 的 PHP 选项 ， 在 【布局 】 下 拉 列 表 框 中 选 
择 【 无 】 选 项 ， 然 后 单 击 【 创 建 】 按 钮 创建 新 页 面 ， 在 网 站 根 目 录 下 新 建 一 个 名 为 
regok.php 的 网 页 并 保存 。 
EEJ2p regok.php 页 面 如 图 15-61 所 示 。 制 作 比 较 简单 ， 其 中 文字 “这 里 ”设置 为 指向 
index.php 页 面 的 链接 。 
ECDIS 如 果 用 户 输入 的 注册 信息 不 正确 或 用 户 名 已 经 存在 ， 则 应 该 向 用 户 显示 注册 失 
败 的 信息 。 这 里 再 新 建 一 个 regfail.php 页 面 ， 该 页 面 的 设计 如 图 15-62 所 示 。 其 中 
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15-61 ”注册 成 功 regok.php 页 面 15-62 ”注册 失败 regfail.php 页 面 


15.4.3 ”用户 注册 功能 的 测试 


设计 完成 后 ， 就 可 以 测试 该 用 户 注册 功能 的 选择 情况 了 ， 具 体 的 操作 步骤 如 下 。 

EEC 打开 IE 浏览 器 ， 在 地 址 栏 中 输入 http://localhost/register.php， 打 开 registerphp 
文件 ， 如 图 15-63 所 示 。 

EEC 可 以 在 该 注册 页 面 中 输入 一 些 不 正确 的 信息 ， 如 漏 填 usermame、password 等 必 
填 字 段 ， 或 填写 错误 的 E-mail 地 址 ， 或 在 确认 密码 时 两 次 输入 的 密码 不 一 致 ， 以 测 
试 网 页 中 验证 表单 动作 的 选择 情况 。 如 果 填 写 的 信息 不 正确 ， 则 浏览 器 应 该 打开 警 
告 框 ， 向 访问 者 显示 错误 原因 ， 图 15-64 所 示 为 一 个 出 错 提 示 框 。 





警 沙 崩 不 也 到 民 恒 由 忆 一 上 询 潭 泗 同 只 上 状 需 94 小 全 





了 
图 15-63 打开 的 测试 页 面 图 15-64 出 错 提 示 杠 


EEJep 在 该 注册 页 面 中 注册 一 个 已 经 存在 的 用 户 名 ， 如 输入 admin， 用 来 测试 新 用 户 服 
务 器 行为 的 选择 情况 。 然 后 单 击 【 确 定 】 按 钮 ， 此 时 由 于 用 户 名 已 经 存在 ， 浏 览 器 
会 自动 转 到 regfail.php 页 面 ， 如 图 15-65 所 示 ， 告 诉 访问 者 该 用 户 名 已 经 存在 。 此 
时 ， 访 问 者 可 以 单 击 “ 这 里 ”链接 文本 ， 返 回 register.php 页 面 ， 以 便 重 新 进行 注册 。 

EC 在 该 注册 页 面 中 填写 图 15-66 所 示 的 注册 信息 。 


username Rt 入 NN 
- email 要 要 纺 入 . 
- QQ 更 要 纵 入 & 闻 ， 
- address 需要 按 入 . 
- answer 顶 要 给 入 。 
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图 15-65 ”注册 失败 页 面 显示 15-66 ”填写 正确 信息 


国 于 BY 单 击 【 确 定 】 按 钮 。 由 于 这 些 注册 资料 完全 正确 ， 而 且 这 个 用 户 名 没有 重复 。 
浏览 器 会 转 到 regok.php 页 面 ， 向 访问 者 显示 注册 成 功 的 信息 ， 如 图 15-67 所 示 。 此 
时 ， 访 问 者 可 以 单 击 “ 这 里 ”链接 文本 ， 转 到 index.php 页 面 ， 以 便 进行 登录 。 
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15-67 ”注册 成 功 页 面 


至 此 ， 基 本 完成 了 用 户 管理 系统 中 注册 功能 的 开发 和 测试 ， 在 制作 的 过 程 中 ， 可 以 根据 
制作 网 站 的 需要 适当 加 入 其 他 更 多 的 注册 文本 域 。 


15.5 ”用户 注册 资料 修改 模块 的 设计 


修改 用 户 注册 资料 的 过 程 就 是 在 用 户 数据 表 中 更 新 记录 的 过 程 。 本 节 重 点 介绍 如 何在 用 
户 管理 系统 中 实现 用 户 资料 的 修改 功能 。 


15.5.1 修改 资料 页 面 


该 页 面 主要 把 用 户 所 有 资料 都 列 出 ， 通 过 “更 新 记录 ”命令 实现 资料 修改 的 功能 。 有 具体 
的 操作 步骤 如 下 。 

EC 首先 制作 用 户 修改 资料 的 页 面 。 该 页 面 和 用 户 注册 页 面 的 结构 十 分 相似 ， 可 以 
通过 对 register.php 页 面 的 修改 来 快速 得 到 所 需要 的 记录 更 新 页 面 。 打 开 register.php 
页 面 ， 选 择 【 文 件 】 一 【另存 为 】 菜 单 命令 ， 打 开 【 另 存 为 】 对 话 框 ， 将 该 文档 另 
存 为 userupdatephp， 如 图 15-68 所 示 。 

EC 选择 【窗口 】 一 【服务 器 行为 】 菜 单 命令 ， 打 开 【 服 务 器 行为 】 面 板 。 在 【 服 
务 器 行为 】 面 板 中 删除 全 部 的 服务 器 行为 并 修改 其 相应 的 文字 ， 该 页 面 修改 完成 后 
如 图 15-69 所 示 。 
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15-68 【另存 为 】 对 话 框 15-69 ”userupdate.php 静态 页 面 


EGRS) 选择 【窗口 】 一 【 绑 定 】 菜 单 命令 ， 打 开 【 绑 定 】 面 板 ， 单 击 该 面板 上 的 此 按 

钮 ， 在 弹出 的 下 拉 菜单 中 选择 【记录 集 (查询 )】 命 令 ， 则 会 打开 【记录 集 】 对 话 框 。 

在 该 对 话 框 中 进行 以 下 设置 。 

在 【名 称 】 文 本 框 中 输入 upuser 作为 该 “记录 集 ” 的 名 称 。 

从 【连接 】 下 拉 列 表 框 中 选择 user 数据 源 连 接 对 象 。 

从 【表格 】 下 拉 列 表 框 中 选择 使 用 的 数据 库 表 对 象 为 member。 

在 【 列 】 选 项 组 中 选中 【全 部 】 单 选 按钮 。 

在 【筛选 】 栏 中 设置 记录 集 过 滤 的 条 件 为 usemame、=，【 阶 段 变 量 】 为 

MM userName。 

完成 后 的 设置 如 图 15-70 所 示 。 

EEC 设置 完成 后 ， 单 击 【 确 定 】 按 钮 ， 完 成 记录 集 的 绑 定 。 然 后 将 upuser 记录 集中 
的 字段 绑 定 到 页 面 上 相应 的 位 置 ， 如 图 15-71 所 示 
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图 15-70 ”定义 upuser 记录 集 15-71 绑 定 动态 内 容 后 的 userupdate.php 页 面 


EERD 对 于 网 页 中 的 单 选 按钮 组 sex 对 象 ， 绑 定 动态 数据 可 以 按照 以 下 方法 单 击 【 服 
务 器 行为 】 面 板 上 的 此 按钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【动态 表单 元 素 】 一 【动态 单 选 按钮 
组 】 命 令 ， 设 置 动 态 单 选 按钮 组 对 象 ， 打 开 【 动 态 单 选 按钮 组 】 对 话 框 ， 从 【 单 选 按钮 组 】 
下 拉 列 表 框 中 选择 forml 表单 中 的 单 选 按钮 组 sex， 如 图 15-72 所 示 。 
EEDRUD 单 击 【选取 值 等 于 】 文 本 框 后 面 的 按钮 ， 从 打开 的 【动态 数据 】 对 话 框 中 选 
择 【 记 录 集 (upuser)】 中 的 sex 字段 ， 并 用 相同 的 方法 设置 【密码 提示 问题 】 的 列表 
选项 ， 设 置 完成 后 的 对 话 框 如 图 15-73 所 示 。 


晤 3[ 量 节 记录 集 (pwser) 








动态 单 洗 按 乌 组 x 


单 选 按 要 组 : “sex” 在 表单 “foral” 


EE 
迁 了 值 等 于 到 I | 
E20 

















并 到 ;php eche $row_npuser[ sex J: 7: 














15-72 【动态 单 选 按钮 组 】 对 话 框 15-73 【动态 数据 】 对 话 框 
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ES 单 击 【服务 器 行为 】 面 板 上 的 荡 按 钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【更 新 记录 】 
命令 ， 为 网 页 添加 更 新 记录 的 服务 器 行为 ， 如 图 15-74 所 示 。 

EECRD 打开 【更 新 记录 】 对 话 框 ， 该 对 话 框 与 插入 记录 的 对 话 框 十 分 相似 ， 有 具体 的 设 
置 情 况 如 图 15-75 所 示 ， 这 里 不 再 重复 。 








Go To Detail page 
Go To Related page 





rte BE [其 二 




















图 15-74 选择 【更 新 记录 】 命 令 图 15-75 【更 新 记录 】 对 话 框 


EERE》 设置 完成 后 ， 单 击 【确定 】 按 钮 ， 关 闭 该 对 话 框 ， 返 回 到 文档 窗口 ， 然 后 选择 
【文件 】 一 【保存 】 菜 单 命令 ， 将 该 文档 保存 到 本 地 站 点 中 。 


Se 由 于 本 页 的 MM _username 值 是 来 自 上 一 页 注册 成 功 后 的 用 户 名 值 ， 所 以 单 
汇 。 独 测试 时 会 提示 出 错 ， 要 先 登 录 ， 在 登录 成 功 页 面 单 击 【 修 改 你 的 注册 资料 〗 超 
链接 到 该 页 面 才 会 产生 效果 ， 这 在 后 面 的 测试 实例 中 将 进行 介绍 。 


15.5.2 ”更 新 成 功 页 面 


用 户 修改 注册 资料 成 功 后 就 会 转 到 userupdateok.php。 在 该 网 页 中 ， 应 该 向 用 户 显 示 资 料 
修改 成 功 的 信息 。 此 外 ， 还 应 该 考虑 两 种 情况 : 如 果 用 户 要 继续 修改 资料 ， 则 为 其 提供 一 个 
返回 到 userupdate.php 页 面 的 超 文 本 链接 : 如 果 用 户 不 需要 修改 ， 则 为 其 提供 一 个 转 到 用 户 登 
录 页 面 index.php 页 面 的 超 文 本 链接 。 

具体 的 制作 步骤 如 下 。 

EC 选择 【文件 】 一 【新 建 】 菜 单 命令 ， 打 开 【 新 建文 档 】 对 话 框 ， 选 择 【 空 白 

页 】 选 项 界面 【页 面 类 型 】 下 拉 列 表 框 中 的 PHP 选项 ， 在 【布局 】 下 拉 列 表 框 中 选 
择 【 无 】 选 项 ， 然 后 单 击 【 创 建 】 按 钮 创建 新 页 面 ， 在 网 站 根 目录 下 新 建 一 个 名 为 
userupdateok.php 的 网 页 并 保存 。 

EEJPp 为 了 向 用 户 提供 更 加 友好 的 界面 ， 应 该 在 网 页 中 显示 用 户 修改 的 结果 ， 以 供用 

户 检查 修改 是 否 正确 。 首 先 应 该 定义 一 个 记录 集 ， 然 后 将 绑 定 的 记录 集 插 入 到 网 页 
中 相应 的 位 置 ， 其 方法 和 制作 页 面 userupdate -php 中 的 方法 一 样 。 通 过 在 表格 中 添加 
记录 集中 的 动态 数据 对 象 ， 把 用 户 修 改 后 的 信息 显示 在 表格 中 ， 这 里 不 再 详细 说 
明 ， 请 参考 前 面 一 小 节 ， 最 终结 果 如 图 15-76 所 示 。 
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15-76 ”设计 “更 新 成 功 的 页 面 ” 


15.5.3 ”修改 资料 功能 的 测试 


编辑 工作 完成 后 ， 就 可 以 测试 该 修改 资料 功能 的 选择 情况 了 。 具 体 的 操作 步 又 如 下 。 

ES 打开 I 下 浏览 器 ， 在 地 址 栏 中 输入 http://localhost/index.php， 打 开 index.php 文 
件 。 在 该 页 面 中 进行 登录 。 登 录 成 功 后 进入 welcome.php 页 面 ， 在 welcome.php 页 面 
单 击 【 修 改 你 的 资料 】 超 链接 ， 转 到 userupdate.php 页 面 ， 如 图 15-77 所 示 。 

EECDRP 在 该 页 面 中 进行 一 些 修改 ， 然 后 单 击 【修改 】 按 钮 将 修改 结果 发 送 到 服务 器 
中 。 当 用 户 记录 更 新 成 功 后 ， 浏 览 器 会 转 到 userupdateok.php 页 面 中 ， 显 示 修 改 资料 
成 功 的 信息 ， 同 时 还 显示 了 该 用 户 修改 后 的 资料 信息 ， 并 提供 转 到 更 新 成 功 页 面 和 
转 到 主页 面 的 链接 对 象 ， 这 
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图 15-77 ”修改 刘 莉 用 户 注册 资料 图 15-78 更 新 记录 成 功 显示 页 面 


15.6 ”密码 查询 模块 的 设计 
在 用 户 注册 页 面 时 ， 设 计 问题 和 答案 文本 框 ， 它 们 的 作用 是 当 用 户 忘记 密码 时 ， 可 以 通 


过 这 个 问题 和 答案 到 服务 器 中 找 回 遗失 的 密码 。 实 现 的 方法 是 判断 用 户 提供 的 答案 和 数据 库 
中 的 答案 是 否 相同 ， 如 果 相 同 则 可 以 找 回 遗失 的 密码 。 


. 
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15.6.1 密码 查询 页 面 


本 小 节 主 要 制作 密码 查询 页 面 lostpasswordphp， 上 有 具体 的 制作 步骤 如 下 。 

EC 选择 【文件 】 一 【新 建 】 菜 单 命 令 ， 打 开 【 新 建文 档 】 对 话 框 ， 选 择 【空白 
页 】 选 项 界面 【页 面 类 型 】 下 拉 列 表 框 中 的 PHP 选项 ， 在 【布局 】 下 拉 列 表 框 中 选 
择 【 无 】 选 项 ， 然 后 单 击 【创建 】 按 钮 创建 新 页 
面 ， 在 网 站 根 目 录 下 新 建 一 个 名 为 人 本 


用 PS 


lostpassword.php 的 网 页 并 保存 。lostpasswordphp | ga | 
SS 页 面 是 用 来 让 用 户 提交 要 查询 遗失 密码 的 用 户 名 的 

















页 面 。 该 网 页 的 结构 比较 简单 ， 设 计 后 的 效果 如 ”图 15-79 lostpassword.php 页 面 
图 15-79 所 示 。 

EEJPp 在 文档 窗口 中 选中 表单 对 象 ， 然 后 在 其 对 应 的 【属性 】 面 板 中 ， 在 【表单 ID】 
文本 框 中 输入 form1， 在 【动作 】 文 本 框 中 输入 showquestion.php 作为 该 表单 提交 的 
对 象 页 面 。 在 【方法 】 下 拉 列 表 框 中 选择 POST 作为 该 表单 的 提交 方式 ， 接 下 来 将 
输入 用 户 名 的 da 命名 为 nputname， 如 图 15-80 所 示 。 


到 表单 ID 动作 showauestion php 
wd [foral 方法 PasT - 编码 类 型 








国 二 - 字符 机 度 0 | 类 型 可 单行 6) 。 口 多 行 。 个 密码 D) 类 中 无 四 
apataw 最 多 字符 数 初 抬 值 I) 多 

口 划 用 中 

口 R 访 中 





15-80 设置 表单 提交 的 动态 属性 


sr 表单 属性 设置 面板 中 的 主要 选项 作用 如 下 。 
sE @ 在 【表单 ID】 文 本 框 中 ， 输 入 标志 该 表单 的 唯一 名 称 。 命 名 表单 后 ， 就 

可 以 使 用 脚本 语言 (如 JavaScripb 引 用 或 控制 该 表单 。 如 果 不 命名 表单 ， 
则 Dreamweaver CC 使 用 语法 forml、from2、… 生 成 一 个 名 称 ， 并 在 向 
页 面 中 添加 每 个 表单 时 递增 n 的 值 。 

@ 在 【方法 】 下 拉 列 表 框 中 选择 将 表单 数据 传输 到 服务 器 的 方法 。POST 
方法 将 在 HTTP 请 求 中 嵌入 表单 数据 。GET 方法 将 表单 数据 附加 到 请 求 
该 页 面 的 URL 中 ， 是 默认 设置 ， 但 其 缺点 是 表单 数据 不 能 太 长 ， 所 以 
本 例 选 择 POST 方法 。 

@ 【目标 〗 下 拉 列 表 框 用 于 指定 返回 窗口 的 显示 方式 ， 各 目标 值 含义 如 下 。 


信 350 


_blank 在 未 命名 的 新 窗口 中 打开 目标 文档 。 

_parent 在 显示 当前 文档 的 窗口 的 父 窗口 中 打开 目标 文档 。 

_self 在 提交 表单 所 使 用 的 窗口 中 打开 目标 文档 。 

_top 在 当前 窗口 的 窗 体内 打开 目标 文档 。 此 值 可 用 于 确保 目标 文档 
占用 整个 窗口 ， 即 使 原始 文档 显示 在 框架 中 。 


当 用 户 在 lostpassword.php 页 面 中 输入 用 户 名 并 单 击 【提交 ]】 按 钮 后 ， 会 通过 表单 将 用 户 
名 提交 到 showquestion.php 页 面 中 ， 该 页 面 的 作用 就 是 根据 用 户 名 从 数据 库 中 找到 对 应 记录 的 
提示 问题 ， 并 显示 在 showquestion.php 页 面 中 ， 用 户 在 该 页 面 中 输入 问题 的 答案 。 
下 面 就 制作 显示 问题 的 页 面 ， 操 作 步 又 如 下 。 
EED 新 建 一 个 文档 。 设 置 好 网 页 属性 后 ， 输 入 网 页 标题 “查询 问题 ”， 选 择 【 文 
件 】 一 【保存 】 菜 单 命令 ， 将 该 文档 保存 为 showquestion.php。 
EEC 在 Dreamweaver CC 中 制作 静态 网 页 ， 完 成 的 效果 如 图 15-81 所 示 。 
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图 15-81 showquestion.php 静态 设计 


EEJep 在 文档 窗口 中 选中 表单 对 象 ， 在 其 对 应 的 【属性 】 面 板 中 ， 在 【动作 】 文 本 框 
中 输入 showpassword.php 作为 该 表单 提交 的 对 象 页 面 。 在 【方法 】 下 拉 列 表 框 中 选 
择 POST 作为 该 表单 的 提交 方式 ， 如 图 15-82 所 示 。 接 下 来 将 输入 密码 提示 问题 答 
案 的 文本 域 命名 为 inputanswer。 


1 
! 设置 表单 提交 的 动作 为 showpassword.pbp， 方法 为 POST 1 
el [ee 
副 表单 了 动作 |:horpasswordmm |D 
一 forml 方法 POST 一 编码 类 型 




















15-82 ”设置 表单 提交 的 属性 
EC 选择 【窗口 】 一 【 绑 定 】 菜 单 命 令 ， 打 开 【 绑 定 】 面 板 ， 单 击 该 面板 上 的 外 按 
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钮 ， 在 弹出 的 下 拉 菜单 中 选择 【记录 集 (查询 )】 命 令 ， 则 会 打开 【记录 集 】 对 话 框 。 
EEJDp 在 该 对 话 框 中 进行 以 下 设置 。 
e@ 在 【名 称 】 文 本 框 中 输入 Recordsetl 作为 该 记录 集 的 名 称 。 
e@ ”从 【连接 】 下 拉 列 表 框 中 选择 user 数据 源 连 接 对 象 。 
e@ ”从 【表格 】 下 拉 列 表 框 中 选择 使 用 的 数据 库 表 对 象 为 member。 
e 在 【 列 】 选 项 组 中 选中 【 选 定 的 】 单 选 按钮 ， 然 后 从 列表 框 中 选择 usemame 和 


question 。 























e 在 【筛选 】 栏 中 ， 设置 记 录 集 过 滤 的 条 件 为 username、=，【 表 单 变量 】 为 
username， 表 示 根 据 数 据 库 中 usermame 字段 的 内 容 是 否 和 从 上 一 个 网 页 中 的 
inputname 表单 对 象 传递 过 来 的 信息 完全 一 致 来 过 滤 记 录 对 象 。 

完成 后 的 设置 如 图 15-83 所 示 。 

记录 集 x 
pr Recorasetl | we 
连接 : ww -| 一 i 
“EE 7 运用 表单 变量 | 
并 1 usemame 作为 ! 
4 ! 提示 问题 的 第 选 ! 
下 ] 条 件 1 
Mi Ce 可 下 图 PP 
EE | 
排序 : 无 v 开光 ~ 


图 15-83 【记录 集 】 对 话 框 
EEC 设置 完成 后 ， 单 击 该 对 话 框 上 的 【确定 】 按 钮 ， 关 闭 该 对 话 框 。 返 回 到 文档 窗 
口 。 将 Recordsetl 记录 集中 的 question 字段 绑 定 到 页 面 上 相应 的 位 置 ， 如 图 15-84 
所 示 。 





到 页 面 上 相应 的 位 置 


题 答案 : [ -1 将 question 字段 绑 定 
下 
1 


图 15-84 ” 绑 定 字段 
选择 【插入 】 一 【表单 】 一 【隐藏 】 菜 单 命令 ， 在 表单 中 插入 一 个 表单 隐藏 
域 ， 然 后 将 该 隐藏 域 的 名 称 设置 为 username， 如 图 15-85 所 示 。 
ED 选中 该 隐藏 域 ， 转 到 【动态 数据 】 对 话 框 ， 将 Recordsetl 记录 集中 的 username 
字段 绑 定 到 该 表单 隐藏 域 中 ， 如 图 15-86 所 示 。 


全 352 

















15-85 绑 定 字段 


en 当 用 户 输入 的 用 户 名 不 存在 时 ， 即 记录 集 Recordsetl 为 空 时 ， 就 会 导致 该 页 
SS 面 不 能 正常 显示 ， 这 就 需要 设置 隐藏 区 域 


EEDy 在 文档 窗口 中 选中 当 用 户 输入 用 户 名 存在 时 显示 的 内 容 即 整个 表单 ， 然 后 单 击 
【服务 器 行为 】 面 板 上 的 包 按 钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【显示 区 域 】 一 【如 果 
记录 集 不 为 空 则 显示 】 命 令 ， 则 会 打开 【如 果 记录 集 不 为 空 则 显示 】 对 话 框 ， 在 该 
对 话 框 中 选择 【记录 集 】 对 象 为 Recordsetl 。 这 样 只 有 当 记录 集 Recordsetl 不 为 空 
时 才 显 示 出 来 。 设 置 完成 后 ， 单 击 【 确 定 】 按 钮 ， 如 图 15-87 所 示 。 关 闭 该 对 话 
框 ， 返 回 到 文档 窗口 。 
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了 将 usemame 字 上 

/上 段 绑 定 到 该 表 1 

1 _， 单 隐藏 域 中 1 
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Dens 如 果 记 录 集 不 为 空 则 显示 x 

tol 
> | [En| 
格式 : 元 加 取消 | 
Me [Crphe eoho Sr on RcordsotiL uror]] 者 助 | 
图 15-86 ”添加 表单 隐藏 域 15-87 【如 果 记 录 集 不 为 空 则 显示 】 对 话 框 


EC 在 网 页 中 编辑 显示 用 户 名 不 存在 时 的 文本 “该 用 户 名 不 存在 ! ”， 并 为 这 些 内 
容 设 置 一 个 “如 果 记 录 集 为 空 则 显示 ”隐藏 区 域 服务 器 行为 ， 这 样 当 记录 集 
Recordsetl 为 空 时 ， 显 示 这 些 文本 ， 完 成 后 的 网 页 如 图 15-88 所 示 。 


四 
1 为 页 面 设计 | 
1 “条 件 显示 ! 
! 区 域 ” ! 








15-88 ”设置 隐藏 区 域 


Dreamweaver Ce 
案例 课堂 (第 2 版 ) 罗 一 


15.6.2 ”完善 密码 查询 功能 页 面 


当 用 户 在 showquestion.php 页 面 中 输入 答案 ， 单 击 【 提 交 】 按 钮 后 ， 服 务 器 就 会 把 用 户 名 
和 密码 提示 问题 答案 提交 到 showpassword.php 页 面 中 。 下 面 介绍 如 何 设计 该 页 面 。 

其 操作 步骤 如 下 。 

EC 选择 【文件 】 一 【新 建 】 菜 单 命令 ， 打 开 【 新 建文 要 】 对 话 框 ， 选 择 【空白 
页 】 选 项 界面 【页 面 类 型 】 下 拉 列 表 框 中 的 PHP 选项 ， 在 【布局 】 下 拉 列 表 框 中 选 
择 【 无 】 选 项 ， 然 后 单 击 【创建 】 按 钮 创建 新 页 面 ， 在 网 站 根 目 录 下 新 建 一 个 名 为 
showpassword.php 的 网 页 并 保存 。 

EGR 在 Dreamweaver CC 中 使 用 提供 的 制作 静态 网 页 的 工具 完成 图 15-89 所 示 的 静态 
部 分 。 





查 光洁 果 


汪 且 直达 有 机 生产 四 本 村 直 供 人 康健 
网 总 多 和 康 包 居中 时 保 血 二 后 他 


图 15-89 showpassword.php 静态 设计 


ECDRUS 选择 【窗口 】 一 【 绑 定 】 菜 单 命 令 ， 打 开 【 绑 定 】 面 板 ， 单 击 该 面板 上 的 外 按 
钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【记录 集 (查询 )】 命 令 ， 则 会 打开 【记录 集 】 对 话 框 。 

ECG 在 该 对 话 框 中 进行 以 下 设置 。 

e@ 在 【名 称 】 文 本 框 中 输入 Recordsetl 作为 该 记录 集 的 名 称 。 

e@ ”从 【连接 】 下 拉 列 表 框 中 ， 选 择 user 数据 源 连 接 对 象 。 

e@ ”从 【表格 】 下 拉 列 表 框 中 ， 选 择 使 用 的 数据 库 表 对 象 为 member。 

@ 在 【 列 】 选 项 组 中 选中 【 选 定 的 】 单 选 按钮 ， 然 后 选择 字段 列表 框 中 的 username、 
password 和 answer 等 3 个 字段 即 可 。 

e@ ”在 【筛选 】 栏 中 设置 记录 集 过 滤 的 条 件 为 answer、=，【URL 参数 】 为 inputanswer， 
表示 根据 数据 库 中 answer 字段 的 内 容 是 否 和 从 上 一 个 网 页 中 的 表单 中 的 inputanswer 
表单 对 象 传递 过 来 的 信息 完全 一 致 来 过 滤 记录 对 象 。 

完成 的 设置 情况 如 图 15-90 所 示 。 

ED 单 击 【 确 定 】 按 钮 ， 关 闭 该 对 话 框 ， 返 回 到 文档 窗口 。 将 记录 集中 usemame 和 


password 两 个 字段 分 别 添加 到 网 页 中 ， 如 图 15-91 所 示 。 

















a 人 
rr | 本 -和 近 信 cal 刍 近 择 其 中 的 1 
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图 15-90 eR 对 话 框 





对 不 起 您 输入 的 答案 不 正确 ， 请 单 击 这 里 重新 输入 ? 


绑 定 的 两 个 字 
插入 到 页 面 中 


PP: (Recordsetl usernme] 
密码 : {Recordsetl, password) | 
音 击 这 时 重 新 于 录 1 


江村 





图 15-91 加 入 的 记录 集 效果 


同样 需要 根据 记录 集 Recordsetl 是 否 为 空 ， 为 该 网 页 中 的 内 容 设置 隐藏 区 域 的 
服务 器 行为 。 在 文档 窗口 中 ， 选 中 当 用 户 输入 密码 提示 问题 答案 正确 时 显示 的 内 
容 ， 然 后 单 击 【 服 务 器 行为 】 面 板 上 的 外 按钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【显示 区 
域 】 一 【如 果 记 录 集 不 为 空 则 显示 】 命 令 ， 打 开 【 如 果 记 录 集 不 为 空 则 显示 】 对 话 
框 ， 在 该 对 话 框 中 选择 【记录 集 】 对 象 为 Recordsetl 。 这 样 只 有 当 记 录 集 Recordsetl 不 
为 空 时 才 显 示 出 来 ， 如 图 15-92 所 示 。 设 置 完成 后 ， 单 击 【确定 】 按 钮 ， 关 闭 该 对 





话 框 ， 返 回 到 文档 窗口 。 











EC 在 网 页 中 选择 当 用 户 输入 密码 提示 问题 答案 不 正确 时 显示 的 内 容 ， 并 为 这 些 内 
容 设 置 一 个 “如 果 记 录 集 为 空 则 显示 ”隐藏 区 域 服务 器 行为 ， 这 样 当 记录 集 


Recordsetl 为 空 时 ， 显 示 这 些 文 本 ， 如 图 15-93 所 示 。 








如 果 记 录 集 不 为 则 号 示 x 如 记录 和 为 则 呈 示 x 
记录 入 Recoriseti 本 记录 集 [EGG = 
| 帮助 | ”帮助 





15-92 【如 果 记 录 集 不 为 空 则 显示 】 对 话 框 图 15-93 【如 果 记 录 集 为 空 则 显示 】 对 话 框 


EEJRE 完成 后 的 网 页 如 图 15-94 所 示 。 选 择 【 文 件 】 一 【保存 】 菜 单 命令 ， 将 该 文档 保 


存 到 本 地 站 点 中 。 
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证 食堂 采购 更 加 简单 











枚 二 去 过 者 机 生 因 末 对 在 吕 加 PY 
居多 委 轨 舍 让 区 六 





15-94 ”完成 后 的 网 页 效果 
15.6.3 ”密码 查询 模块 的 测试 


编辑 工作 完成 后 ， 就 可 以 测试 密码 查询 模块 功能 的 选择 情况 了 。 具 体 的 操作 步 又 如 下 。 

EC 打开 IE 浏览 器 ， 在 地 址 栏 中 输入 http://localhost/index.php， 打 开 index.php 文 
件 ， 如 图 15-95 所 示 。 

EEJR2 单 击 【 找 回 密码 】 超 链接 ， 进 入 【密码 查询 】 页 面 ， 在 【用 户 名 】 文 本 框 中 输 
入 要 查询 密码 的 用 户 名 称 ， 如 这 里 输入 “ 刘 莉 ”， 如 图 15-96 所 示 。 


让 食堂 末 购 更 加 简单 





| 放 Pz | 优选 一 品 
里 看 漆 作 日 当时 用 


De 6 人 绕 Fh 本 加 
安全 /方便 /放心 ! 


wn 2 到 4 © “un Mog a 
:入 4 
图 15-95 ”用户 管理 系统 主页 图 15-96 【密码 查询 】 页 面 


EEJe) 单 击 【提交 】 按 钮 ， 进 入 【查询 问题 】 页 面 ， 在 其 中 根据 提示 输入 问题 的 答 
案 ， 如 图 15-97 所 示 。 

EEC 单 击 【 提 交 】 按 钮 ， 进 入 【查询 结果 】 页 面 ， 如 果 问 题 回 答 正确 ， 则 在 该 页 面 
中 显示 用 户 的 名 称 和 密码 信息 ， 则 密码 查询 成 功 ， 如 图 15-98 所 示 。 

葬 于 BY 如 果 在 【查询 问题 】 页 面 中 输入 的 问题 答案 和 注册 时 输入 的 不 一 样 ， 当 单 击 
【提交 】 按 钮 后 ， 会 显示 图 15-99 所 示 的 提示 信息 ， 提 示 用 户 问 题 回 答 错误 。 

EEJD 这 时 单 击 【这 里 】 超 链接 ， 会 返回 到 【查询 密码 】 页 面 中 ， 这 就 说 明 密 码 查 询 
模块 功能 测试 成 功 ， 图 15-100 所 示 。 
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网 上 菜市 场 © 一 
网 上 菜市 场 
查询 问题 
问题 提示 : 你 最 好 的 朋友 SR 
问题 管 案 : ”吴宇 
医 于 习 





15-97 【查询 问题 】 页 面 


网 上 菜市 场 


© 全 区 全 中 国生 © 人 二 症 训 委 汪 站 达 


查询 结果 
对 不 起 您 输入 的 管 案 不 正确 ， 请 单 击 这 里 重新 输入 ! 


图 15-99 ”提示 信息 页 面 


i 


用 户 : 刘 葡 
密码 : 123456 
单 击 这 里 重新 登录 


图 15-98 【查询 结果 】 页 面 














图 15-100 【密码 查询 】 页 面 
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第 16 章 

综合 应 用 案例 2 

一 一 开发 信息 资讯 
管理 系统 


信息 资讯 管理 系统 是 动态 网 站 建设 中 最 常见 的 系统 ， 几 乎 每 一 个 网 站 都 有 信息 
资讯 管理 系统 ， 尤 其 是 政府 部 门 、 教 育 系统 或 企业 网 站 。 信 息 资讯 管理 系统 的 作 
用 就 是 在 网 上 发 布 信息 ， 通 过 对 信息 的 不 断 更 新 ， 让 用 户 及 时 了 解 行业 信息 、 企 
业 状 况 。 


Dreamweaver CC 动态 网 站 开发 
案例 课堂 (第 2 版 ) 罗 一 


16.1 系统 的 功能 分 析 


在 开发 动态 网 站 之 前 ， 需 要 规划 系统 的 功能 和 各 个 页 面 之 间 的 关系 ,绘制 出 系统 脉络 
图 ， 这 样 方便 后 面 整个 系统 的 开发 与 制作 。 


16.1.1 规划 网 页 结构 和 功能 














信息 资讯 管理 系统 中 涉及 的 主要 操作 就 是 访问 者 的 信息 查询 功能 和 系统 管理 员 对 信息 内 
容 的 新 增 、 修 改 及 删除 功能 ， 本 章 将 要 制作 的 信息 资讯 管理 系统 的 网 页 结构 如 图 16-1 所 示 。 


信息 资讯 管理 系统 








information_del.php information_upd.php 


图 16-1 信息 资讯 管理 系统 结构 框图 
网 站 的 信息 资讯 管理 系统 ， 在 技术 上 主要 体现 为 如 何 显示 信息 内 容 ， 用 模糊 关键 字 进行 
信息 查询 ， 以 及 对 信息 及 信息 分 类 的 修改 和 删除 。 一 个 完整 信息 资讯 管理 系统 分 为 两 大 部 
分 ， 一 个 是 访问 者 访问 信息 的 动态 网 页 部 分 ， 另 一 个 是 管理 者 对 信息 进行 编辑 的 动态 网 页 部 
分 。 本 系统 页 面 共有 11 个 ， 整 体系 统 页 面 的 功能 与 文件 名 称 如 表 16-1 所 示 。 
表 16-1 信息 资讯 管理 系统 开发 网 页 设计 表 


需要 制作 的 主要 页 面 页 面 名 称 功 能 
网 站 首页 index php 显示 信息 分 类 和 最 新 信息 页 面 
信息 分 类 页 面 ype php 显示 信息 分 类 中 的 信息 标题 页 面 











合 360 


| 














16.1.2 页面 设计 规划 


在 本 地 站 点 建立 站 点 文件 夹 news， 将 要 建立 制作 信息 资讯 系统 的 文件 和 文件 夹 ， 如 
图 16-2 所 示 。 


CD 

第 

续 表 本 

需要 制作 的 主要 页 面 功 能 本 
信息 内 容 页 面 显示 信息 内 容 页 面 绽 
后 台 管 理 入 口 页 面 admin login php 管理 者 登录 入 口 页 面 应 
后 台 管 理 主页 面 对 信息 进行 管理 的 主要 页 面 晤 
新 增 信息 页 面 information add.php 增加 信息 的 页 面 例 
修改 信息 页 面 information upd.php 修改 信息 的 页 面 小 
删除 信息 页 面 information del.php 删除 信息 的 页 面 开 
新 增 信息 分 类 页 面 | ype addphp | 增加 信息 分 类 的 页 面 发 
修改 信息 分 类 页 面 | wpe updphp ”| 修改 信息 分 类 的 页 面 辣 
删除 信息 分 类 页 面 删除 信息 分 类 的 页 面 | 
管 

理 

系 

统 
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图 16-2 规划 站 点 文件 和 文件 夹 


16.1.3 ”网 页 美工 设计 


信息 资讯 管理 系统 主要 起 到 了 对 行业 信息 进行 宣传 的 作用 ， 在 色调 上 可 以 选择 简单 的 蓝 
色 作 为 主 色调 。 信 息 首 页 index.php 效果 如 图 16-3 所 示 。 


ws [DT 重生 





16-3 ”信息 首页 index.php 效果 
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16.2 ”数据 库 设 计 与 连接 


本 节 主 要 讲述 如 何 使 用 phpMyAdmin 建立 信息 管理 系统 的 数据 库 ， 如 何 使 用 
Dreamweaver 在 数据 库 与 网 站 之 间 建 立 动态 链接 。 


16.2.1 数据 库 设计 


信息 资讯 管理 系统 需要 一 个 用 来 存储 信息 标题 和 信息 内 容 的 信息 表 information， 还 要 建 
立 一 个 信息 分 类 表 information type 和 一 个 管理 员 账 号 信息 表 admin 。 信 息 数据 表 
information、 信 息 分 类 表 information type 和 管理 信息 表 admin 的 字段 分 别 采用 表 16-2 一 
表 16-4 所 示 的 结构 。 





表 16-2 信息 数据 表 information 


字段 描述 | 字段 名 | 数据 类 型 ”| 主键 | 外 键 | 非 空 | 唯一 | 默认 什 
主题 彤 号 | iari |mrej | 是 | 否 | 是 | 是 | 无 | 
信息 标题 。 | inf te。 |varcHaR(s0) | 否 | 吾 | 是 | 吾 | 无 
ee。 | 次 | 是 | 是 | 次 | 天 

信息 内 容 。 | 否 | 理 
信息 加 入 时 间 
编辑 者 





表 16-3 ”信息 分 类 表 information_type 


| 字段 名 | 数据 类 型 | 主键 | 外 键 | 非 空 | 唯一 | 默认 值 
信息 分 类 编号 [typeia |mre | 是 | 百 | 是 | 是 | 无 | 


信息 分 类 名 称 | pe uame | vARCHAR(s0) | 百 | 百 | 是 | 五 | 无 


表 16-4 管理 信息 表 admin 








二 | 一 





创建 数据 库 的 操作 步骤 如 下 。 

EEJD 启动 phppMyAdmin， 在 主 界面 的 左 侧 列表 中 单 击 【新 建 】 链 接 ， 如 图 16-4 
所 示 。 

EEC) 在 文本 框 中 输入 要 创建 数据 库 的 名 称 news， 然 后 单 击 【 创 建 】 按 钮 ， 如 图 16-5 
所 示 。 

ED 接着 就 要 回 到 phpMyAdmin 的 管理 界面 ， 为 MySQL 中 的 news 数据 库 添加 数据 
表 。 在 左 侧 列表 中 选择 创建 的 news 数据 库 ， 然 后 在 右 侧 的 页 面 中 输入 添加 的 数据 表 








名 称 和 字段 数 ， 再 单 击 【执行 】 按 钮 ， 如 图 16-6 所 示 。 
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16-4 ” phpMyAdmin 的 工作 界面 


@ 才 所 库 局 SQL 双 状态 


phpMyAdmin 


四 rT 
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图 16-5 创建 数据 库 news 








图 16-6 新 建 数据 表 information 


据 表 ， 添 加 的 数据 表 字 段 如 图 16-7 所 示 。 
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项 二 ram [Sa 
无 国 |%23t2_dmex 回 | 国 | 四 
mawwe EE | 百 四 天 wz ams 四 并” 可 到 





16-7 ”添加 数据 表 字 段 


EEJRUD 在 设置 完毕 之 后 ， 单 击 【 保 存 】 按 钮 ， 即 可 查看 information 数据 表 ， 如 图 16-8 


所 示 。 


EEJUD 选择 information 数据 表 ， 单 击 菜单 上 的 【插入 】 链 接 。 依 照 字段 的 顺序 ， 将 对 


应 的 数值 依次 输入 ， 单 击 【 执 行 】 按 钮 ， 即 可 插入 数据 ， 如 图 16-9 所 示 。 


按照 图 16-10 所 示 的 数据 ， 重 复 执行 上 一 步 的 操作 ， 将 数据 输入 到 数据 表 中 。 
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回 1intid int(8) We .各 天 只 修改 @ 几 除 坟 
D2inftide 。 varchar(50) gb2312 chinese_ci 否 无 人 个 区 加 出 除 汉 
回 3 typeid int8) 否 无 Ed OW Dp 
4 inf_content text gb2312 chinese_ci 否 天 Ek OWRD 
5inftime 。 datetime 否 天 Ed OWS 
DD 6 inf_author varchar(20) gb2312_chinese_ci 否 无 个 下 加 出 除 忆 


16-8 information 数据 表 


Bam Hm Esa 和 3 er EM Sm oan » mens 

















3 a BR 宝 纪 
Ws) eried 
国 下 
ee l | 王 二 小 中 二 ,秋天 正 关 时 
oold ul) 加 
| 一 Sl 
Ep 品 2M17-1104120000 | 加 
laser vochar20) 器 ”3 
3 
La Lane pe_id ntL_content nttime int_author 
23 拓 相 小 内 . 孙 天 正当 时 2 这 里 对 过 内 容 2017-11-04 1200.00 王 I 明 
24。 避 分 过 后 时 歼 瑟 壮大 医生 过 也 外 运动 和 六 风 本 。。。4 这 对 出 旗 的 内 容 2017-11.05 00.00.00 小 如 
26 ”金秋 天 气 京平 沁 养 生 亚 2 葛 这 2017-11-08 00:00:00 亚 天 
27 到 天 窜 是 导 下 么 人 ? 三 入 饮 呈 有 你 快 上 好 2 Bi 2017-11-08 00-00.00 admn 
28 诬 条 必 要 论 水 四 种 水 ， 哪 _ 种 虹 利 于 得 系 ? 3 更 放 2017-97.20 010000 edmin 
79 7 党 和 机关 生 攻 有 交 主 理 罗 加 几 2 2017-11-05 02.06 00 ad 
30“ 灾 天 并 生肖 百 6 坎 保健 并 2 测 芭 2017-0109040000 小 三 
31 TE 4 人 A 3 he 2047-41-11 4600:00 小 全 


图 16-10 输入 information 表 中 的 记录 


四 于 BY 采用 上 述 方法 ， 参 照 表 16-3 和 表 16-4， 创 建 一 个 名 称 为 information_type 和 名 
称 为 admin 的 数据 表 。 输 入 字段 名 称 并 设置 其 属性 ， 最 终 效果 如 图 16-11 和 图 16-12 
所 示 。 


[H 服 务 器 : mysql wampserver > 者 数据库 - news » 图 去- admin 





克服 务 器 : mysql wamml CE 
由 小 是 结 和 辐 SQL 六 搜索 与 括 A 忆 Sk i i My so NR | 
# 名 字 类 型 。 排序 规则 属性 空 默认 大 外 六 岂 斌 ww 站 已 失 放 避风 A 
回 1 二 int(8) UNsIeNED 否 无 回 1 usermame varchar(20) gb2312 _chinese_ci 否 无 
器 2 type_name varchar(50) gb2312_chinese_ci 否 天 D2 ponent wehbe qos yma ed 要 天 
图 16- information, 图 16- admin 
图 16-11 information_type 的 表 结构 图 16-12 admin 的 表 结 构 


EDUD 为 了 演示 效果 ， 分 别 对 information type 数据 表 和 admin 数据 表 添加 记录 ， 
如 图 16-13 和 图 6-14 所 示 。 


使 364 


type_id type_name 


2 | 养生 之 道 | ee 

3 | 饮食 养生 Username passwo 

4 运动 养生 | admin admin | 
16-13 向 information_type 表 中 输入 的 记录 16-14 向 admin 表 中 输入 的 记录 


16.2.2 ”创建 数据 库 连 接 


数据 库 编辑 完成 后 ， 必 须 在 Dreamweaver CC 中 建立 数据 源 连 接 对 象 。 这 样 做 的 目的 是 方 
便 在 动态 网 页 中 使 用 前 面 建立 的 信息 系统 数据 库 文件 和 动态 地 管理 信息 数据 。 具 体操 作 步 又 
如 下 。 
EC 根据 前 面 讲 过 的 站 点 设置 方法 ， 设 置 好 “站 点 ” “文档 类 型 ”“ 测 试 服务 
器 ”。 打 开创 建 的 index.php 页 面 ， 选 择 【 窗 口 】 一 【数据 库 】 菜 单 命 令 ， 进 入 【 数 
据 库 】 面 板 。 单 击 【数据 库 】 面 板 中 的 四 按钮 ， 弹 出 图 16-15 所 示 的 下 拉 菜 单 ， 选 
择 【MySQL 连接 】 命 令 。 
EEJPp 进入 【MySQL 连接 】 对 话 框 后 ， 输 入 自 定义 的 连接 名 称 information， 输 入 
MySQL 服务 器 的 用 户 名 和 密码 ， 单 击 【 选 取 】 按 钮 来 选取 连接 的 数据 库 ， 如 图 16-16 
所 示 。 





MySQL 连接 x 





这 按 名 称 - infornation 确定 
:localhost } 取消 














1. 为 该 文件 创建 站 点 。 
2. 选择 一 种 文档 内 型 。 


型式 服务 器 。 
4 单 击 上 面 的 + 按钮 创建 连接 。 








16-15 ”连接 数据 库 16-16 【MySQL 连接 】 对 话 框 


ECDIS 打开 【选取 数据 库 】 对 话 框 ， 选 择 news 数据 库 ， 单 击 【 确 定 】 按 钮 ， 如 图 16-17 
所 示 。 

EC 返回 和 到 【MySQL 连接 】 对 话 框 后 ， 单 击 【 确 定 】 按 钮 。 返 回 Dreamweaver 
CC， 此 时 打开 【数据 库 】 面 板 ， 看 到 news 数据 库 的 数据 表 在 连接 设置 后 已 经 读 入 
Dreamweaver CC 了 ， 如 图 16-18 所 示 。 

ERRD 同时 ， 在 网 站 根 目录 下 将 会 自动 创建 名 为 Connections 的 文件 夹 ， 该 文件 夹 内 有 
一 个 名 为 informationphp 的 文件 ， 打 开 访 文件， 切换 到 【代码 】 视 图 ， 添 加 以 下 代码 : 

mysql_query("set character set 'gb2312'");// 读 数据 库 编码 

mysql_query ("set names 'gb2312'");// 写 数据 库 编码 


添加 效果 如 图 16-19 所 示 。 
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16-18 【数据 库 】 面 板 





-Ox 














图 16-19 添加 代码 


EEOUD 在 Dreamweaver CC 界面 中 选择 【文件 】 一 【保存 】 菜 单 命令 ， 保 存 该 文档 ， 完 
成 数据 库 的 连接 。 


16.3 ”系统 页 面 设计 


信息 资讯 管理 系统 前 台 部 分 主要 有 3 个 动态 页 面 ， 分 别 是 信息 主页 面 index.php)、 信 息 分 
类 页 面 (type.php) 和 信息 内 容 页 面 (newscontent.php)。 


16.3.1 网 站 首页 的 设计 


本 小 节 主 要 介绍 信息 资讯 管理 系统 主页 面 index.php 的 制作 ， 在 index.php 页 面 中 主要 有 
显示 最 新 信息 的 标题 、 信 息 的 加 入 时 间 、 显 示 信 息 分 类 ， 单 击 信 息 中 的 分 类 进入 分 类 子 页 面 
可 以 查看 信息 子 类 中 的 信息 ， 单 击 信息 标题 进入 信息 详细 内 容 页 面 ， 可 以 对 信息 的 主题 内 容 
进行 搜索 等 。 

1. 制作 信息 分 类 模块 


下 面 介绍 首页 中 信息 分 类 模块 的 制作 ， 详 细 的 操作 步骤 如 下 。 
EEJDg 打开 创建 的 index.php 页 面 ， 输 入 网 页 标题 “健康 养生 网 首页 ”， 选 择 【文件 】 
一 【保存 】 菜 单 命令 将 网 页 保存 ， 如 图 16-20 所 示 。 


> 2 366 








16-20 ”添加 网 页 标题 


EEJR29 选择 【修改 】 一 【页 面 属性 】 菜 单 命令 ,打开 【页 面 属性 】 对 话 框 ， 选 择 【 分 
类 】 列 表 框 中 的 【外 观 (CSS)】 选 项 ， 字 体 【大 小 】 设 置 为 12px， 在 【上 边 距 】 文 本 
框 中 输入 0px， 这 样 设置 的 目的 是 为 了 让 页 面 的 第 一 个 表格 能 置顶 到 上 边 ， 如 图 16-21 
所 示 。 

区 于 BY 单 击 【 确 定 】 按 钮 ， 进 入 文档 窗口 ， 选 择 【 插 入 】 一 【表格 】 菜 单 命令 ， 打 开 
【表格 】 对 话 框 ， 在 【 行 数 】 文 本 框 中 输入 行 数 为 4; 在 【 列 】 文 本 框 中 输入 列 数 
为 2。 在 【表格 宽度 】 文 本 框 中 输入 990 像素 ， 其 他 设置 如 图 16-22 所 示 。 
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sh css) 
页 面市 人) [加 要 节 征 本 = 
大 BS 
ys5aa I |] | 
2): EI |] 
MM 加 
重 志 外 ) -| 
轨 一 一 一 一 一 一 一 一 一 一 一 
三 也 所 0 ”| ww: | 4 
| Tibmtol:[] IE 摘要 
一 果 2 En Cw | [CC |W 
图 16-21 【页 面 属性 】 对 话 框 图 16-22 设置 插入 一 个 4 行 2 列 的 表格 


EC 单 击 【确定 】 按 钮 ， 在 文档 窗口 中 ， 插 入 了 一 个 4 行 2 列 的 表格 。 单 击 选择 插 
入 的 整个 表格 ， 在 【 属性】 面板 上 单 击 【对 齐 】 下 拉 按 钮 ， 在 下 拉 列 表 框 中 选择 
【居中 对 齐 】 选 项 ， 让 插入 的 表格 居中 对 齐 ， 如 图 16-23 所 示 。 




















图 表格 行 @4 | 宽 oD so0 [像素 ~] 填充) 0 对齐) [居中 对 齐 =] 类 CC) 无 eq 
忆 3| 一 一 | 是 
~ ciz | 间距 g) 0 ”边框 @B) 0 
ER 久 日 
5 





16-23 【属性 】 面 板 


EEIRD 将 光标 放置 在 第 1 行 第 1 列 单元 格 中 ， 选 择 【 插 入 】 一 【图 像 】 一 【图 像 】 菜 
单 命令 ,打开 【选择 图 像 源 文 件 】 对 话 框 ， 选 择 images 文件 下 的 logo.gif 图 像 ， 单 

击 【 确 定 】 按 钮 插入 图 片 ， 如 图 16-24 所 示 。 

ECEUD 将 光标 放置 在 第 1 行 第 2 列 单元 格 中 ， 选 择 【 插 入 】 一 【图 像 】 一 【图 像 】 菜 
单 命令 ,打开 【选择 图 像 源 文件 】 对 话 框 ， 选 择 images 文件 下 的 banner.gif 图 像 ， 
单 击 【 确 定 】 按 钮 插入 图 片 ， 如 图 16-25 所 示 。 
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| 加 mW |]| Ws | | 2 有 录 | 
16-24 插入 logo.gif 图 像 16-25 ”插入 banner.gif 图 像 





EC 将 光标 放置 在 第 2 行 单元 格 中 ， 选 择 【 插 入 】 一 【图 像 】 一 【图 像 】 菜 单 命 
令 ， 打 开 【 选 择 图 像 源 文件 】 对 话 框 ， 选 择 images 文件 下 的 1.gif 图 像 ， 单 击 【 确 








健康 搞笑 图 说 健 康 
图 库 美女 粒 生 


图 16-26 网 站 首页 头 部 的 设计 


EESRUB 将 光标 放置 在 第 3 行 表格 中 ， 选 择 【 插 入 】 一 【表格 】 菜 单 命令 ,插入 一 个 1 


行 3 列 的 表格 ， 在 第 3 行 第 1 列 单元 格 中 插入 一 个 leftjpg 图 像 作为 背景 ， 效 果 如 
图 16-27 所 示 。 














16-27 在 第 3 行 第 1 列 插入 背景 图 
EEC 将 光标 放置 在 第 3 行 第 3 列表 格 中 ， 在 第 3 行 第 3 列 中 插入 一 个 03.gif 图 像 作 
为 背景 ， 效 果 如 图 16-28 所 示 。 
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图 16-28 在 第 3 行 第 3 列 插 入 图 片 


EC 将 光标 放置 在 第 4 行 单元 格 中 。 选 择 【 插 入 】 一 【图 像 】 一 【图 像 】 菜 单 命 
令 ， 打 开 【 选 择 图 像 源 文件 】 对 话 框 ， 选 择 同 站 点 images 文件 夹 中 的 7.gif 图 片 ， 如 
图 16-29 所 示 。 
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16-29 在 第 4 行 插入 图 片 


葬 囊 将 光标 放置 在 第 3 行 第 1 列 的 单元 格 中 ， 选 择 【 插 入 】 一 【表格 】 菜 单 命令 ， 
打开 【表格 】 对 话 框 ， 在 【 行 数 】 文 本 框 中 输入 行 数 4， 在 【 列 】 文 本 框 中 输入 1， 
在 【表格 宽度 】 文 本 框 中 输入 92%， 其 【边框 粗细 】、【 单 元 格 边 距 】 和 【单元 格 
间距 】 都 为 0， 如 图 16-30 所 示 。 

EE 玫 2 单 击 刚 创建 的 左边 空白 单元 格 ， 然 后 再 单 击 文 档 窗口 上 的 碟 加 按钮 ， 在 <tt> 和 
</td> 之 间 输 入 valign="top" 代 码 ， 表 示 让 光标 能 够 自动 放置 至 单元 格 的 最 上 方 ， 如 
图 16-31 所 示 。 

EEC 接 下 来 用 【 绑 定 】 面 板 ， 将 网 页 所 需要 的 数据 字段 绑 定 到 网 页 中 。index.php 这 
个 页 面 使 用 的 数据 表 是 information 和 information type， 单 击 【 应 用 程序 】 面 板 组 中 
【 绑 定 】 面 板 上 的 向 | 按钮， 在 弹出 的 下 拉 菜 单 中 选择 【记录 集 (查询 )】 命 令 ， 在 打 
开 的 【记录 集 】 对 话 框 中 输入 如 表 16-5 所 示 的 数据 ， 如 图 16-32 所 示 。 
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16-30 【表格 】 对 话 框 16-31 加 入 代码 


表 16-5 “记录 集 ” 设 定 





属 性 设置 值 
名 称 Recordsetl 
连接 information 
表格 information type 


EEC 绑 定 记录 集 后 ， 将 记录 集中 信息 分 类 的 字段 type_name 插入 至 index.php 网 页 的 
适当 位 置 ， 如 图 16-33 所 示 。 
































x 
确定 
~ |[ 守 又 [3 
| 
一 cordset1. type_name} | 
各 造 无 
| i 
排序 天 于 Te NN NE : 
| 贿 黎 崇 : 
图 16-32 【记录 集 】 对 话 框 图 16-33 插入 至 index.php 网 页 中 


由 于 要 在 index.php 这 个 页 面 中 显示 数据 库 中 所 有 信息 分 类 的 标题 ， 而 目前 的 设 
定 只 会 显示 数据 库 的 第 一 笔 数据 ， 因 此 ， 需 要 加 入 【服务 器 行为 】 中 的 【重复 区 
域 】 命 令 ,， 让 所 有 的 信息 分 类 全 部 显示 出 来 ， 选 择 {Recordsetl.type_name} 所 在 的 
行 ， 如 图 16-34 所 示 。 

EC 单 击 【应 用 程序 】 面 板 组 中 【服务 器 行为 】 面 板 上 的 出 | 按钮 ， 在 弹出 的 下 拉 菜 
单 中 选择 【重复 区 域 】 命 令 ， 在 打开 的 【重复 区 域 】 对 话 框 中 ， 选 中 【所 有 记录 】 
单 选 按钮 ， 如 图 16-35 所 示 。 

EC 单 击 【 确 定 】 按 钮 回 到 编辑 页 面 ， 会 发 现 先前 所 选取 要 重复 的 区 域 左上 角 出 现 


使 370 


| 














第 

了 一 个 “重复 ”的 灰色 标签 ， 这 表示 已 经 完成 设置 ， 如 图 16-36 所 示 。 5 

二 区 x 水 分 类 机 

a | BE 

时 未 〇 10 记录 二 应 

DD 

16-34 ”选择 要 重复 显示 的 一 列 16-35 选择 一 次 可 以 显示 的 次 数 。 图 16-36 添加 重复 区 域 效果 开 
发 

2. 转 到 详细 页 面 的 访问 设置 得 
在 本 程序 的 设计 上 ， 和 希望 用 户 在 浏览 信息 标题 页 面 后 ， 可 以 选择 有 兴趣 的 主题 来 阅读 详 
细 内 容 。 而 选择 主题 再 转 到 详细 页 面 ， 就 是 在 这 里 要 设置 的 。 号 
若 用 户 曾 使 用 过 Dreamweaver CC 开发 如 ASP 的 网 页 程序 ， 就 会 发 现在 PHP 的 环境 中 区 


【服务 器 行为 】 面 板 似乎 少 了 一 个 功能 ， 即 “ 转 到 细节 页 面 ”。 其 实 不 只 少 了 这 个 功能 ， 但 是 
以 这 个 功能 的 使 用 频率 较 高 ， 那 该 怎么 办 呢 ? 

这 里 要 使 用 由 www.felixone.it 所 制作 的 <MX682891_ FX_PHPMissingTools.mxp> 扩 充 程 
序 ， 可 以 在 该 作者 的 网 站 中 查找 并 下 载 安装 这 个 扩充 程序 ， 如 图 16-37 所 示 。 
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16-37 ”查看 扩展 插件 


双击 MX682891 FX PHPMissingTools.zxp 插件 ， 即 可 打开 许可 证 安装 窗口 ， 单 击 【 接 
受 】 按 钮 ， 将 自动 安装 该 插件 ， 如 图 16-38 所 示 。 

安装 完成 后 ， 在 插件 管理 器 窗口 中 即 可 看 到 刚刚 安装 的 插件 ， 如 果 不 再 需要 ， 可 以 单 击 
【 移 除 】 按 钮 ， 删 除 该 插件 ， 如 图 16-39 所 示 。 


。 扒 续 县 作 之 前 ， 读 他 细 癌 计 以 下 内 容 。 





16-38 ”许可 证 安装 窗口 16-39 成功 安装 插件 
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在 安装 完毕 之 后 ， 请 一 定 要 关闭 Dreamweaver CC 后 再 重新 打开 ， 以 确保 这 


个 扩充 程序 可 以 正确 使 用 . 


“ 转 到 详细 页 面 ”就 是 用 户 在 选择 某 一 标题 的 文字 访问 后 会 转 到 另 一 个 页 面 来 显示 该 主题 
的 详细 内 容 。 但 是 另 一 个 页 面 怎 么 知道 要 从 数据 库 中 调 出 哪 一 个 记录 来 显示 呢 ? 所 以 在 主页 
面 上 的 访问 必须 要 带 一 个 值 让 详细 页 面 来 判断 ， 这 就 是 这 个 服务 器 行为 的 目的 。 以 下 是 设置 
Go To Detail Page 的 具体 步骤 。 
EEJDgp 为 了 实现 这 个 功能 首先 要 选取 编辑 页 面 中 的 信息 分 类 标题 字段 ， 如 图 16-40 
所 示 。 
EC 单 击 【应 用 程序 】 面 板 组 中 【服务 器 行为 】 面 板 上 的 四 按钮 ， 在 弹出 的 下 拉 菜 
单 中 选择 Go To Detail Page 命令 ， 如 图 16-41 所 示 。 

















a 


| G8 To Related Page 
图 16-40 ”选择 信息 分 类 标题 图 16-41 选择 Go To Detail Page 命令 
EEJe 在 打开 的 Go To Detail Page 对 话 框 中 单 击 【 浏 览 】 按 钮 ， 打 开 【 选 择 文件 】 对 
话 框 ， 选 择 此 站 点 中 的 typephp， 如 图 16-42 所 示 。 


EEC 单 击 【确定 】 按 钮 ， 返 回 到 Go To Detail Page 对 话 框 ， 其 他 设 定 值 采用 默认 
值 ， 如 图 16-43 所 示 。 























i x 
人 [are » 
| 
EL 
Mae0 Dr 
国 ii ceTopeslpage 四 
= i 
量 双 ; EE MW 
4 ss ape. rio BE] | 己 
小 本 TT 三 
LL ~ 加 a 
BT "| 
文件 各 INk typephp Lcd 
| | 
图 16-42 【选择 文件 】 对 话 框 图 16-43 ”Go To Detail Page 对 话 框 


ER 单 击 【 确 定 】 按 钮 回 到 编辑 页 面 ， 主 页 面 index.php 中 信息 分 类 的 制作 已 经 完 


信 372 


成 ， 最 新 信息 的 显示 页 面 设计 效果 如 图 16-44 所 示 。 





图 16-44 设计 结果 效果 
3. 制作 信息 数据 读 取 模 块 


制作 完成 信息 分 类 栏目 后 ， 下 一 步 就 是 将 information 数据 表 中 的 信息 数据 读 取出 来 ， 并 
在 首页 上 进行 显示 。 

具体 的 操作 步骤 如 下 。 

EC 将 光标 放置 在 第 3 行 第 2 列 的 单元 格 中 ， 选 择 【 插 入 】 一 【表格 】 菜 单 命令 ， 
打开 【表格 】 对 话 框 ， 在 【 行 数 】 文 本 框 中 输入 行 数 3， 在 【 列 】 文 本 框 中 输入 列 
数 2。 在 【表格 宽度 】 文 本 框 中 输入 92%， 其 【边框 粗细 】、【 单 元 格 边 距 】 和 
【单元 格 间距 】 都 为 0， 如 图 16-45 所 示 。 

EEJPp 单 击 【 确 定 】 按 钮 ， 即 可 在 网 页 中 插入 表格 ， 如 图 16-46 所 示 。 


BR x 
雪 模 大小 


党 油 沸 下 车 赔 如 击溃 于 一 2 位 济 沽 间 吵 拆 、 协 9. 名 全 
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图 16-45 【表格 】 对 话 框 图 16-46 插入 表格 


ECGUS 合并 第 一 行 单元 格 ， 然 后 选择 【插入 】 一 【图 像 】 菜 单 命令 ， 打 开 【 选 择 图 像 
源 文件 】 对 话 框 ， 在 其 中 选择 要 插入 的 图 片 ， 如 图 16-47 所 示 。 
EEC 单 击 【确定 】 按 钮 ， 插 入 图 片 ， 如 图 16-48 所 示 。 
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| 
man Ou 
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| 新 养生 资讯 “Information 
ma Go -| wee ori ep 
Ea | [We 了 
16-47 【选择 图 像 源 文 件 】 对 话 杠 16-48 插入 图 上 


ES 单 击 【应 用 程序 】 面 板 组 中 【 绑 定 】 面 板 上 的 四 按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 【 记 录 集 (查询 )】 命 令 ， 在 打开 的 【记录 集 】 对 话 框 中 输入 表 16-6 所 示 的 数据 ， 
如 图 16-49 所 示 。 


表 16-6 “记录 集 Re1” 设 定 
IT 





information 
L# 序 | 


EEJD 插入 “记录 集 ” 后 ， 将 记录 集 的 字段 插入 至 index.php 网 页 的 适当 位 置 ， 如 
图 16-50 所 示 。 


以 information id 升序 




















EE x 
DE] 
Mt 
E23 
EL] 

由 一 -E 最 新 养生 资讯 Information 
| 二 厚 ' [ii ”~ 升 康 四 
| {Rel. inf_titlel {Rel. inf_tine} 
图 16-49 【记录 集 】 对 话 框 图 16-50 ” 绑 定 数据 


EEC 由 于 要 在 index.php 页 面 显示 数据 库 中 部 分 信息 ， 而 目前 的 设 定 则 只 会 显示 数据 
库 的 第 一 笔 数 据 ， 因 此 ， 需 要 加 入 【服务 器 行为 】 中 【重复 区 域 】 的 设置 来 重复 显 
示 部 分 信息 ， 单 击 选择 要 重复 显示 信息 的 那 一 行 ， 如 图 16-51 所 示 。 


最 新 养生 资讯 Information 


人 ncn | 


16-51 单 击 需要 重复 的 表格 
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EUD) 单 击 【应 用 程序 】 面 板 组 中 【服务 器 行为 】 面 板 上 的 四 按钮 ， 在 弹出 的 下 拉 菜 
单 中 选择 【重复 区 域 】 命 令 ， 在 弹出 的 【重复 区 域 】 对 话 框 中 ，【 记录 集 】 选 择 
Rel， 要 重复 的 记录 条 数 输入 10 条 记录 ， 如 图 16-52 所 示 。 

















重复 区 域 x 
记录 集 :|Rel ~| 一 一 
1 | 

显示 : @ 记录 | 




















16-52 【重复 区 域 】 对 话 框 


EEC) 单 击 【 确 定 】 按 钮 ， 回 到 编辑 页 面 ， 会 发 现 先前 所 选取 要 重复 的 区 域 左上 角 出 
现 了 一 个 “重复 ”的 灰色 标签 ， 这 表示 已 经 完成 设 定 了 ， 如 图 16-53 所 示 。 

ED 由 于 最 新 信息 这 个 功能 ， 除 了 显示 网 站 中 部 分 信息 外 ， 还 要 提供 访问 者 感 兴趣 
的 信息 标题 链接 至 详细 内 容 来 阅读 ， 首 先 选取 编辑 页 面 中 的 信息 标题 字段 ， 如 图 16-54 
所 示 。 


起 新 并 生 资讯 Informatlon 


;最 新 养生 资讯 ，Information 


图 16-53 ”添加 重复 区 域 效果 图 16-54 选择 信息 标题 字段 


EEDDD 单 击 【应 用 程序 】 面 板 组 中 【服务 器 行为 】 面 板 上 的 四 按钮 ， 在 弹出 的 下 拉 菜 
单 中 选择 Go To Detail Page 命令 ， 在 打开 的 Go To Detail Page 对 话 框 中 单 击 【 浏 
览 】 按 钮 ， 如 图 16-55 所 示 。 打 开 【 选 择 文件 】 对 话 框 ， 选 择 此 站 点 中 information 
文件 夹 中 的 content.php。 

EEC 单 击 【 确 定 】 按 钮 回 到 编辑 页 面 。 当 记录 集 超过 一 页 ， 就 必须 要 有 【上 一 
页 】、【 下 一 页 】 等 按钮 或 文字 ， 让 访问 者 可 以 实现 翻 页 的 功能 。 在 【服务 器 行 
为 】 面 板 中 单 击 负 按钮， 在 弹出 的 下 拉 菜 单 中 选择 【记录 集 分 页 】 一 【 移 至 第 一 
页 】 命 令 ， 添 加 【第 一 页 】 选 项 ， 如 图 16-56 所 示 。 












Go To Detall Page 
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详细 信息 页 : eon ent. Fhp 
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记录 集 - Rel | 
| 
传递 现 有 参数 口 URL 志 数 
OD ass 
































Go To Detail Page 
Go To Related Page 








16-55 ”Go To Detail Page 对 话 框 16-56 【服务 器 行为 】 面 板 
使 用 同样 的 方法 添加 其 他 记录 和 集 分 页 信息 ， 如 图 16-57 所 示 。 
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16-57 ”添加 其 他 记录 集 分 页 信息 


EC 在 【服务 器 行为 】 面 板 中 ， 单 击 国 按 钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【显示 记录 
计数 】 一 【显示 起 始 记 录 编 号 】 命 令 ， 如 图 16-58 所 示 。 

EEC 打开 【显示 起 始 记录 编号 】 对 话 框 ， 单 击 【记录 集 】 右 侧 的 下 拉 按 钮 ， 在 弹出 
的 下 拉 列 表 框 中 选择 Rel 选项 ， 如 图 16-59 所 示 。 



































显示 起 冶 记录 编号 x 

记录 集 [EsI a [mn| 

Go To Detail p | 
Go To Related es 本 
图 16-58 【服务 器 行为 】 面 板 图 16-59 【显示 起 始 记录 编号 】 对 话 框 


ECESIIDs 单 击 【确定 】 按钮 ， 在 网 页 中 添加 记录 编号 信息 ， 如 图 1 16-60 所 示 。 


新 养生 资讯 Information 
Re tle} hm inf_tine} 


尖 涝 {Rel. PirstRecord} 到 全 | 

















图 16-60 ”添加 记录 编号 信息 
E> 使 用 相同 的 方法 添加 其 他 记录 编号 与 记录 数 ， 如 图 16-61 所 示 。 














最 5 关 生 资讯 ifomaton 

Rel inf_title} me inf_time} 

记录 {Rel.FirstRecord} 到 
站 Re ed 





16-61 ”添加 其 他 记录 编号 及 记录 数 


16.3.2 ”搜索 主题 功能 的 设计 


index.php 页 面 需要 加 入 “查询 ”功能 ， 这 样 信息 资讯 管理 系统 才 不 会 因 日 后 数据 太 多 而 
有 不 易 访问 的 情形 发 生 。 具 体操 作 步 骤 如 下 。 
EC 在 index.php 页 面 中 ， 将 光标 放置 在 左 侧 页 面 表格 中 的 第 4 行 ， 然 后 选择 【 插 
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nl 


入 】 一 【表单 】 一 【表单 】 菜 单 命令 ， 在 该 单元 格 中 插入 一 个 表单 ， 如 图 16-62 所 示 。 
EEJ2p 在 表单 中 输入 文字 “健康 查询 ”， 然 后 选择 【插入 】 一 【表单 】 一 【文本 域 】 
菜单 命令 ,插入 一 个 文本 框 ， 如 图 16-63 所 示 。 


重 牧 
Recordset1. type_name} 











健康 搜索 
图 16-62 插入 表单 16-63 ”插入 文本 框 
在 【属性 】 面 板 中 设置 文本 域 的 属性 值 ， 如 图 16-64 所 示 。 
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图 16-64 【属性 】 面板 
ES 将 光标 放置 在 文本 域 的 后 面 ， 选 择 【 插 入 】 一 【表单 】 一 【按钮 】 菜 单 命令 ， 
插入 一 个 按钮 ， 在 【属性 】 面 板 中 设置 按钮 的 名 称 为 “查询 ”， 并 选中 【提交 表 
单 】 单 选 按钮 ， 如 图 16-65 所 示 。 
生 分 类 i| 


{Recordset!1, type_nane) 


罗 GG 












动作 司 提交 表单 C) 站 无 0 美加 无 
中 


图 16-65 ”插入 按钮 并 设置 属性 


EEDRD 在 此 要 将 之 前 建立 的 记录 集 Rel 做 一 下 更 改 。 打 开 【 记 录 集 】 对 话 框 ， 进 入 
【高 级 】 设 置 ， 在 原 有 的 SQL 语法 中 ， 加 入 一 段 具有 查询 功能 的 代码 : 


WHERE inf title like '%''.$keyword. ''%' 
那么 以 前 的 SQL 语句 将 变 成 图 16-66 所 示 。 
nt 其 中 ，like 是 模糊 查询 的 运算 值 ，% 表 示 任 意 字符 ， 而 keyword 是 个 变量 ， 
SS 分 别 代表 关键 词 。 
EEC 切换 到 【人 代码】 视图。 找到 Rel 记录 集 相应 的 代码 并 加 入 以 下 代码 : 


$keyword=$_ POST[keyword]; 


// 定 义 keyword 为 表单 中 "keyword" 的 请 求 变量 
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16-66 修改 SQL 语句 


如 图 16-67 所 示 ， 完 成 设置 。 

ED 以 上 的 设置 完成 后 ，index.php 系统 主页 面 就 有 查询 功能 了 ， 可 以 按 F12 键 ， 到 
浏览 器 测试 一 下 是 否 能 正确 地 查询 。 首 先 index.php 页 面 会 显示 所 有 网 站 中 的 信息 分 
类 主题 和 最 新 信息 标题 ， 如 图 16-68 所 示 。 









而 cqwampwwwweweindecpnp HTVU 











VER: 6 

| ScheValue = ret_matic_qnotes_tpc() ? stripslashes(jrheyalue) 
theValue, 
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16-67 ”加 入 代码 


EEJe 在 关键 词 中 输入 “秋季 ”并 
单 击 【查询 】 按 钮 ， 结 果 会 发 
现 页 面 中 的 记录 只 显示 有 关 
“秋季 ”所 发 表 的 最 新 信息 主 
题 ， 这 样 查询 功能 就 已 经 实现 
了 。 最 终 的 效果 如 图 16-69 所 示 。 


16.3.3 ”信息 分 类 页 面 的 设计 
信息 分 类 页 面 typephp 用 于 显示 每 


个 信息 分 类 ， 当 访问 者 单 击 index php 页 
面 中 的 任何 一 个 信息 分 类 标题 时 就 会 打 图 16-69， 测试 查询 效果 
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开 相 应 的 信息 分 类 页 面 。 
详细 的 操作 步骤 如 下 。 
EC 选择 【文件 】 一 【新 建 】 菜 单 命令 ， 打 开 【 新 建文 档 】 对 话 框 ， 选 择 【 空 白 
页 】 选 项 ， 选 择 【 页 面 类 型 】 下 拉 列 表 框 中 的 PHP 选项 ， 在 【布局 】 下 拉 列 表 框 中 
选择 【无 】 选 项 ， 然 后 单 击 【创建 】 按 钮 创建 新 页 面 ， 输 入 网 页 标题 “信息 分 
类 ”， 选 择 【 文 件 】 一 【保存 】 菜 单 命令 ， 在 站 点 information 文件 夹 中 将 该 文档 保 
存 为 typephp， 如 图 16-70 所 示 。 


veo > | 
| 人 到 | 拆 分 [设计 ] 实时 视图。 铸 。 标题 ， 信 息 分 类 J 





16-70 ”添加 网 页 标题 


EECDR2 信息 分 类 页 面 和 首页 面 中 的 静态 页 面 设计 差不多 ， 另 外 ， 信 息 分 类 页 面 左 侧 的 
“养生 分 类 ”模块 和 首页 的 “养生 分 类 ”模块 一 样 ， 在 这 里 不 作 详细 说 明 ， 如 图 16-71 


所 示 。 
,TT i PA 


NF, EE | 
















A 


16-71 ”测试 查询 效果 


EEJep typephp 这 个 页 面 主要 是 显示 所 有 信息 分 类 标题 的 数据 ， 所 使 用 的 数据 表 是 
information， 单 击 【 绑 定 】 面 板 中 的 【增加 】 标 签 上 的 出 按钮 ， 在 弹出 的 下 拉 菜 单 
中 选择 【记录 集 ( 查 询 )】 命 令 ， 在 打开 的 【记录 集 】 对 话 框 中 输入 表 16-7 所 示 的 数 
据 ， 再 单 击 【确定 】 按 钮 后 就 完成 设 定 了 ， 如 图 16-72 所 示 。 

EGR 单 击 【 确 定 】 按 钮 ， 完 成 记录 集 绑 定 。 将 光标 定位 在 表格 中 第 2 行 ， 然 后 选择 
【插入 】 一 【表格 】 菜 单 命令 ， 打 开 【 表 格 】 对 话 框 ， 在 其 中 设置 表格 的 相关 参 
数 ， 如 图 16-73 所 示 。 

ED 单 击 【 确 定 】 按 钮 ， 在 其 中 插入 一 个 2 行 2 列 的 表格 ， 并 设置 表格 的 对 齐 方式 
为 “居中 对 齐 ”， 如 图 16-74 所 示 。 
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表 16-7 输入 “记录 集 ” 

































































information 
information 
记录 要 x 
2 和 Recordsetl | EE 
连接 -inforaation [主义 - 2 
委 格 ，inforastion > 
于 口 入 的 二 一 一 
16-72 【记录 集 】 对 话 杠 
A 
mE | | 
EE 
这 各 如: 0 | 光春 
单元 痪 边 拓 0 | 加 
单元 情 加 下: | ”| 加 
围 ” 围 
mm 
村 是 - 
填 要 : = 国 
囊 田 济 定 | 服 青 
16-73 【表格 】 对 话 框 图 16-74 插入 表格 
ECGD 合并 第 1 行 ， 将 记录 集 的 字段 插入 至 type.php 网 页 中 的 适当 位 置 ， 如 图 16-75 所 


不 。 




















图 16-75 插入 至 type.php 网 页 中 


EC 为 了 显示 所 有 记录 ， 需 要 加 入 【服务 器 行为 】 中 的 “重复 区 域 ”功能 ， 单 击 选 
中 type.php 页 面 中 需要 重复 的 表格 ， 如 图 16-76 所 示 。 


信 380 


证 








16-76 单 击 选择 要 重复 显示 的 一 行 
EEJRB 单 击 【应 用 程序 】 面 板 组 中 的 【服务 器 




















行为 】 面 板 上 的 因 按 钮 ， 在 弹出 的 下 拉 菜 。 | 全 
单 中 选择 【重复 区 域 】 命 令 ， 打 开 【 重 复 。 | ms Eee 
区 域 】 对 话 框 ， 设 定 一 页 显示 的 数据 为 10 Es ee | 


条 ， 如 图 16-77 所 示 。 

EECRD) 单 击 【 确 定 】 按 钮 ， 回 到 编辑 页 面 ， 会 
发 现 先前 所 选取 要 重复 的 区 域 左 上 角 出 现 图 16-77 【重复 区 域 】 对 话 框 
了 一 个 “重复 ”的 灰色 标签 ， 这 表示 已 经 
完成 设置 ， 如 图 16-78 所 示 。 
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重复 


[Recorasetl inf_titlel 





图 16-78 添加 重复 区 域 效果 
EC 在 【服务 器 行为 】 面 板 中 单 击 四 按钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【记录 集 分 


页 】 一 【 移 至 第 一 页 】 命 令 ， 添 加 【第 一 页 】 选 项 ， 使 用 同样 的 方法 添加 其 他 记录 
集 分 页 信息 ， 如 图 16-79 所 示 。 























macorasetl inf_title} 
0 时 0 未 件 风 吕 于 





图 16-79 添加 记录 集 分 页 信息 
EEDD 在 【服务 器 行为 】 面 板 中 单 击 恩 按钮 ， 在 弹出 的 下 拉 菜单 中 选择 【显示 记录 计 
数 】 一 【显示 起 始 记 录 编 号 】 命 令 ， 打 开 【 显 示 起 始 记 录 编 号 】 对 话 框 ， 单 击 【 记 
录 集 】 右 侧 的 下 拉 按 钮 ， 在 弹出 的 下 拉 列 表 框 中 选择 Recordsetl 选项 ， 如 图 16-80 











所 示 。 
a x 
记录 集 : [Racordseti 辐 
取消 
i 





图 16-80 【显示 起 始 记录 编号 】 对 话 框 
EEaP9 单 击 【 确 定 】 按 钮 ， 在 网 页 中 添加 记录 编号 信息 ， 如 图 16-81 所 示 。 
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人 记录 fgscordsetl FirstRecord} 到 (总 





3 人 如果 入 和 如果 和 件 刚 呈 示 








16-81 添加 记录 编号 信息 
ECEE) 使 用 相同 的 方法 添加 其 他 记录 编号 与 记录 数 ， 如 图 16-82 所 示 。 





二 如 
{Recordsetl. inf_title} 











i {Recordsetl_ FirstRecord} 
Dn Me LE 到 
et AlReco rd 





图 16-82 添加 其 他 记录 编号 


国 于 EY 选取 编辑 页 面 中 的 信息 标题 字段 inf_tile， 再 单 击 【 应 用 程序 】 面 板 组 中 【服务 
器 行为 】 面 板 上 的 于 按钮 ， 在 弹出 的 下 拉 菜单 中 选择 Go To Detail Page 命令 ， 在 打 
开 的 Go To Detail Page 对 话 框 中 单 击 【浏览 】 按 钮 ， 打 开 【 选 择 文件 】 对 话 框 ， 选 
择 information 文件 夹 中 的 contentphp， 设 置 【传递 URL 参数 】 为 inf id， 其 他 参数 
设置 如 图 16-83 所 示 。 最 后 单 击 【确定 】 按 钮 即 可 完成 设置 。 


Go To Detail page 人 


匀 撞 :"C9php soho Sron_Recordseti[ 局 
详细 信息 页 .|content Php [十 一 取消 
传递 URL 参数 ;inf id 设置 为 以 下 HR89 值 EL 
记录 集 Recordsetl ~ 
列 inf id ~ 
传递 现 有 着 数 : 口 URL 参数 
口才 单 名 数 



































16-83 ”Go To Detail Page 对 话 框 


加 入 显示 区 域 的 设 定 。 首 先 选取 记录 集 有 数据 时 要 显示 的 数据 表格 ， 这 里 单 击 
选择 需要 显示 的 整个 表格 ， 如 图 16-84 所 示 。 





记录 {Recordsetl FirstRecord} 到 
nd LastRecord} (总 共 
HRecordsetl. TotalRecords} 





图 16-84 ”选择 要 显示 的 记录 
ECG 单 击 【 应 用 程序 】 面 板 组 中 【服务 器 行为 】 面 板 上 的 国 按 钮 ， 在 弹出 的 下 拉 菜 
单 中 选择 【显示 区 域 】 一 【如 果 记 录 和 集 不 为 空 则 显示 区 域 】 命 令 ， 打 开 【 如 果 记 录 
集 不 为 空 则 显示 】 对 话 框 ， 在 【记录 集 】 下 拉 列 表 框 中 选择 Recordsetl， 如 图 16-85 
所 示 。 
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如 果 记 录 集 不 为 空 则 显示 x 
rn | 
| 取消 
| [都 助 








16-85 【如 果 记 录 集 不 为 空 则 显示 】 对 话 框 


EC 单 击 【确定 】 按 钮 回 到 编辑 页 面 ， 就 会 发 现 先前 所 选取 要 显示 的 区 域 左上 角 出 
现 了 一 个 “如 果 符 合 此 重复 则 显示 ”的 灰色 标签 ， 这 表示 已 经 完成 设置 ， 如 图 16-86 
所 示 。 





图 16-86 出现“ 如 果 符合 此 重复 则 显示 ” 标签 


ECE 选取 记录 集 没有 数据 时 要 显示 的 文字 信息 ， 如 图 16-87 所 示 。 

EC》 单 击 【 应 用 程序 】 面 板 组 中 【服务 器 行为 】 面 板 上 的 国 按钮， 在 弹出 的 下 拉 菜 
单 中 选择 【显示 区 域 】~~【 如 果 记录 集 为 空 则 显示 区 域 】 命 令 ， 打 开 【 如 果 记录 集 
为 空 则 显示 】 对 话 框 ， 设 置 【记录 集 】 为 Recordsetl ， 如 图 16-88 所 示 。 











如 果 记 录 集 为 空 则 显示 x 
记录 集 Recordsetl ~| | [We] 
帮助 
图 16-87 ”选择 没有 数据 时 显示 的 区 域 图 16-88 【如 果 记 录 集 为 空 则 显示 】 对 话 框 


EEJp 单 击 【 确 定 】 按 钮 回 到 编辑 页 面 ， 会 发 现 先前 所 选取 要 显示 的 区 域 左 上 角 出 现 
了 一 个 “如 果 符合 此 重复 则 显示 ”的 灰色 标签 ， 这 表示 已 经 完成 设置 ， 效 果 如 图 16-89 


























16-89 ”记录 集 为 空 则 显示 
至 此 ， 信 息 分 类 页 面 type.php 的 制作 就 已 经 完成 ， 预 览 效 果 如 图 16-90 所 示 。 
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图 16-90 ”信息 分 类 页 面 效果 
16.3.4 ”信息 内 容 页 面 的 设计 


信息 内 容 页 面 content.php 用 于 显示 每 一 条 信息 的 详细 内 容 ， 这 个 页 面 设计 的 重点 在 于 如 
何 接收 主页 面 index.php 和 type.php 所 传递 过 来 的 参数 ， 并 根据 这 个 参数 显示 数据 库 中 相应 的 
数据 。 
详细 操作 步骤 如 下 。 
EC 选择 【文件 】 一 【新 建 】 菜 单 命令 ， 打 开 【 新 建文 档 】 对 话 框 ， 选 择 【 空 白 
页 】 选 项 ， 在 【页 面 类 型 】 下 拉 列 表 框 中 选择 PHP 选项 ， 在 【布局 】 下 拉 列 表 框 中 
选择 【无 】 选 项 ， 然 后 单 击 【 创 建 】 按 钮 创建 新 页 面 ， 选 择 【 文 件 】 一 【保存 】 菜 
单 命令 ， 在 站 点 的 information 文件 夹 中 将 该 文档 保存 为 content.php。 
EEC) 页 面 设 计 和 前 面 的 页 面 设计 差不多 ， 在 这 里 不 作 详 细 的 页 面 制作 说 明 ， 效 果 如 
图 16-91 所 示 。 


ou DIDW EY 


养生 分 类 





16-91 ”信息 内 容 页 面 设计 效果 


ECDIS 单 击 【 绑 定 】 面 板 中 【增加 】 标 签 上 的 国 按 钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【 记 
录 集 (查询 )】 命 令 ， 在 打开 的 【记录 集 】 对 话 框 中 输入 表 16-8 所 列 的 数据 ， 再 单 击 
【确定 】 按 钮 后 就 完成 设置 了 ， 对 话 框 的 设置 如 图 16-92 所 示 。 


表 16-8 “记录 集 ” 的 表格 设置 





地 














名 称 Recordsetl 列 全 部 








表格 information 排序 无 
EEC 将 光标 定位 在 第 2 行 第 2 列 单元 格 中 ， 选 择 【 插 入 】 一 【表格 】 菜 单 命令 ， 打 


开 【 表 格 】 对 话 框 ， 在 其 中 设置 表格 的 参数 ， 如 图 16-93 所 示 。 
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图 16-92 【记录 集 】 对 话 框 图 16-93 【表格 】 对 话 框 


ED 单 击 【 确 定 】 按 钮 ， 在 网 页 中 插入 一 个 3 行 1 列 的 表格 ， 然 后 选择 【插入 】 一 
【图 像 】 菜 单 命令 ， 在 表格 的 第 2 行 插入 一 张 图 片 linejpg， 如 图 16-94 所 示 。 








图 16-94 插入 图 片 line.jpg 


国 于 3 绑 定 记录 集 后 ， 将 记录 集 的 字段 插入 至 contentphp 页 面 中 的 适当 位 置 ， 完 成 信 
息 内 容 页 面 content.php 的 制作 ， 如 图 16-95 所 示 。 


{Recordset1. inf_title} 


Recordset1. inf_content} 


16-95 ” 绑 定 记录 集 到 页 面 中 


EEOUD9 绑 定 数据 到 页 面 后 ， 设 置信 息 标题 和 信息 内 容 的 样式 ， 这 样 更 加 美观 。 选 择 信 
息 标题 字段 ， 在 【属性 】 面 板 中 的 CSS 样式 表 中 ， 设 置 大 小 为 14， 字 体 颜色 为 
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385 舍 


Dreamweaver comp 
























































案例 课堂 (第 2 版 ) 罗 一 
#000， 加 粗 ， 设 置 【目标 规则 】 的 名 称 为 “title”， 如 图 16-96 所 示 。 
尾 性 
S| 目标 规则 | . title ~| | 字体 (0) [品味 认 字 体 二 EE 
本 大 Ga ~ "| 
前 单元 格 。 水 平 如 ) 黑 认 ~ 席 人 ) | | 不 换行 O) 口 有 i 
二 闪 要 二 四 幅 ~ 高 只 | 4 标题 中 口 














16-96 新 建 CSS 样式 


EECSRB 用 同样 的 方法 设置 信息 内 容 的 样式 ， 这 样 信息 内 容 页 面 将 完成 制作 。 预 览 效果 
如 图 16-97 所 示 。 


oo DTT 


A 











eT 三节 和 一 





图 16-97 预览 效果 
16.3.5 “系统 页 面 的 测试 


制作 好 一 个 系统 后 ， 需 要 测试 无 误 才 能 上 传 到 服务 器 以 供 使 用 。 下 面 介绍 系统 页 面 测试 
的 操作 步骤 。 


ES 打开 了 浏览 器 ， 在 地 址 栏 中 输入 http://localhost/index.php， 打 开 index.php 页 
面 ， 如 图 16-98 所 示 。 

EECRP9 单 击 页面 左 侧 信息 分 类 模块 下 的 链接 ， 如 这 里 单 击 【养生 之 道 】 超 链接 ， 即 可 

在 右 侧 的 页 面 中 显示 有 关 “ 养 生 之 道 ” 的 信息 ， 如 图 16-99 所 示 。 


DT 生生 
rs 人 [==| 








dy 





16-99 ” 单 击 【 养 生 之 道 】 超 链接 


ECDRS 单 击 【饮食 养生 】 超 链接 ， 在 右 侧 的 页 面 中 则 显示 有 关 “ 饮 食 养生 ”的 信息 ， 
如 图 16-100 所 示 。 

国 了 YY 如 果 想 要 查看 分 类 信息 的 详细 内 容 ， 可 以 在 右 侧 的 分 类 信息 中 单 击 任意 一 个 文 
章 标 题 ， 就 可 以 打开 该 标题 文章 的 详细 内 容 页 面 ， 如 图 16-101 所 示 。 这 就 说 明 信 息 
资讯 管理 系统 的 前 台 页 面 设计 完成 。 
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图 16-100 单 击 【 饮 食 养生 】 超 链接 图 16-101 详细 内 容 页 面 


16.4 ”后 台 管 理 页 面 设计 


信息 资讯 管理 系统 后 台 管理 对 于 信息 资讯 管理 系统 来 说 非常 重要 ， 管 理 者 可 以 通过 账号 
和 密码 进入 后 台 对 信息 进行 分 类 ， 以 及 对 信息 内 容 进行 增加 、 修 改 或 删除 ， 使 网 站 能 随时 保 
持 最 新 、 最 实时 的 信息 。 


16.4.1 ”后台 管理 入 口 页 面 


后 台 管理 主页 面 必须 受到 权限 管理 ， 可 以 利用 登录 账号 与 密码 来 判别 是 否 由 此 用 户 来 实 
现 权限 的 设置 管理 。 

详细 操作 步骤 如 下 。 

EC 选择 【文件 】 一 【新 建 】 菜 单 命令 ， 打 开 【 新 建文 档 】 对 话 框 ， 选 择 【 空 白 
页 】 选 项 ， 在 【页 面 类 型 】 下 拉 列 表 框 中 选择 ASP VBScript 选项 ， 在 【布局 】 下 拉 
列表 框 中 选择 【无 】 选 项 ， 然 后 单 击 【 创 建 】 按 钮 创建 新 页 面 ， 输 入 网 页 标题 “后 
台 管 理 入 口 ”， 选 择 【 文 件 】 一 【保存 】 菜 单 命令 ， 在 站 点 的 admin 文件 夹 中 将 该 
文档 保存 为 admin_login.php。 

国 于 BY 选择 【插入 】 一 【表单 】 一 【表单 】 菜 单 命令 ,插入 一 个 表单 。 

ECSRUSD 将 光标 放置 在 该 表单 中 ， 选 择 【 插 入 】 一 【表格 】 菜 单 命令 ， 打 开 【 表 格 】 对 
话 框 ， 在 【 行 数 】 文 本 框 中 输入 需要 插入 表格 的 行 数 4， 在 【 列 】 文 本 框 中 输入 需 
要 插入 表格 的 列 数 2， 在 【表格 宽度 】 文 本 框 中 输入 400 像素 ， 其 他 选项 保持 默认 
值 ， 如 图 16-102 所 示 。 
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16-102 插入 一 个 宽 为 400 像素 4 行 2 列 的 表格 


EEC 单 击 【 确 定 】 按 钮 ， 在 该 表单 中 插入 了 一 个 4 行 2 列 的 表格 ， 选 择 表 格 ， 在 
【 属性】 面板 中 ， 设 置 【 对 齐 】 为 【居中 对 齐 】。 拖 动 鼠标 选择 第 1 行 表格 所 有 单 
元 格 ， 在 【属性 】 面 板 中 单 击 吕 按钮 ， 将 第 1 行 表 格 合并 。 用 同样 的 方法 把 第 4 行 
合并 ， 如 图 16-103 所 示 。 





图 16-103 设置 插入 的 表格 


国 于 BY 在 表格 的 第 1 行 中 输入 文字 “信息 资讯 系统 后 台 管理 中 心 ”， 在 表格 的 第 2 行 
第 1 个 单元 格 中 输入 文字 “账号 : ”， 将 光标 定位 在 第 2 行 表格 的 第 2 个 单元 格 中 ， 
选择 【插入 】 一 【表单 】 一 【文本 域 】 菜 单 命 令 ， 插 入 单行 文本 域 表 单 对 象 ， 定 义 
全 全 0 usemame，【 类 型 】 为 单行 ， 文 本 域 属性 设置 及 效果 如 图 16-104 所 示 。 














加 文本 域 字符 高度 0) 类 型 可 单行 6) 全 多 行 是 定 多 类 四 元 bd 
一 ee 最 多 字 行 数 初始 值 0 2 

口 基 中 

口 R 访 中 








图 16-104 输入 “账号 ”名 和 插入 “文本 域 ”的 设置 及 效果 


EC 在 第 3 行 表格 第 1 个 单元 格 中 输入 文字 “密码 : ”， 将 光标 定位 在 第 3 行 表格 
的 第 2 个 单元 格 中 ， 选 择 【 插 入 】 一 【表单 】 一 【文本 域 】 菜 单 命令 ， 插 入 单行 文 
本 域 表 单 对 象 ， 定 义 文本 域名 为 password。【 类 型 】 为 密码 ， 文 本 域 属性 设置 及 效 
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信息 资讯 系统 后 台 管 理 中心 


SE 














加 有 砚 度 m 天 型 间 行 6) 中行 。 加害 0) 类 站 无 ~ 
pssword | 最 多 字符 教 。 。。 初始 值 ) 7 

已 禁 用 加 ) 
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16-105 输入 “密码 ”名 和 插入 “文本 域 ”的 设置 及 效果 


EC 单 击 选择 第 4 行 表格 ， 依 次 选择 两 次 【插入 】 一 【表单 】 一 【按钮 】 菜单 合 
令 ， 插 入 两 个 按钮 ， 并 分 别 在 【属性 】 面 板 中 进行 属性 变更 ， 一 个 为 登录 时 用 的 
【提交 表单 】 选 项 ， 另 一 个 为 【 重 设 表单 】 选 项 ， 属 性 的 设置 及 效果 如 图 16-106 
所 示 。 





属性 
J 摘 竹 名 称 值 w 登录 动作 可 提交 表单 ) 站 无 0 类 加 无 
outton 中 重 设 表单 0) 





动作 提交 表单 S) 无 类 5) 无 ~ 
本 重 设 表单 中 





图 16-106 设置 按钮 及 属性 


EEIRE 选择 网 页 中 的 整个 表格 ， 然 后 在 【属性 】 面 板 中 设置 表格 的 对 齐 方 式 为 【居中 
对 齐 】，【 边 框 】 的 大 小 为 2， 具 体 的 参数 设置 如 图 16-107 所 示 。 





行 ※4 | 痪 mW 400 入 素 =] 博克 0 | 对齐 [ 民 中 对 齐 =] 类 必 
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16-107 【属性 】 面板 


四 于 BY 选择 表格 中 的 文字 ， 然 后 在 【属性 】 面 板 中 的 CSS 设置 界面 中 设置 文字 的 【大 
小 】 为 16， 表 格 的 【背景 颜色 】 为 #66CCFF， 如 图 16-108 所 示 。 
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到 9 水 平 四 [居中 对 齐 | 宽 轨 | | 不 换行 O) 门 ” 背 景 颜色 (6) [Es| se8ccFF | 
一 口 闪 本 让 中卫 从 7 高 | 36 标本 四 口 

















16-108 ”设置 文字 样式 


本 DY 单 击 【 应 用 程序 】 面 板 组 中 【服务 
器 行为 】 面 板 上 的 国 按钮 ， 在 弹出 的 下 
拉 菜 单 中 选择 【用 户 身份 验证 】 一 【 登 
录用 户 】 命 令 ， 打开 【 登 录用 户 】 对 话 
框 ， 设 置 如 果 不 成 功 将 返回 登录 页 面 
admin login.php 重新 登录 ， 如 果 成 功 将 
登录 后 台 管理 主页 面 admin.php， 如 
图 16-109 所 示 。 

EEC 选择 【窗口 】 一 【行为 】 菜 单 命 。 | 












































令 ， 打 开 【 行 为 】 面 板 ， 单 击 【 行 为 Smee 
面板 中 的 国 按钮 ， 在 弹出 的 下 拉 菜 音 
中 选择 【检查 表单 】 命 令 ， 打 开 【 检 查 0 


表单 】 对 话 框 ， 设 置 username 和 
password 文本 域 的 【 值 】 都 为 【必需 的 】，【 可 接受 】 为 【任何 东西 】， 如 图 16-110 
所 示 。 

EEP9 单 击 【 确 定 】 按 钮 ， 回 到 编辑 页 面 ， 完 成 后 台 管 理 入 口 页 面 admin_ login.php 的 
设计 与 制作 。 预 览 效 果 如 图 16-111 所 示 。 


























检查 表单 x 
Ce 
更 消 | 
.| 
可 摘 受 ， 图 任何 东西 OF 
口 电子 邮件 地 址 。 〇 数字 从 到 
16-110 【检查 表单 】 对 话 框 16-111 ”后 台 登 录 界 面 预览 效果 


16.4.2 ”后 台 管理 主页 面 


后 台 管 理 主页 面 是 管理 者 在 登录 页 面 验证 成 功 后 所 进入 的 页 面 ， 这 个 页 面 可 以 实现 对 信 
息 分 类 以 及 信息 内 容 的 新 增 、 修 改 或 删除 ， 使 网 站 能 随时 保持 最 新 、 最 实时 的 信息 。 

详细 操作 步骤 如 下 。 

EC 打开 adminphp 页 面 (此 页 面 设计 比较 简单 ， 页 面 设计 在 这 里 不 作 说 明 )， 单 击 
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【 绑 定 】 面 板 上 的 国 按 钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【记录 集 ( 查 询 )】 命 令 ， 在 【 记 
录 集 】 对 话 框 中 输入 表 16-9 所 示 的 数据 ， 单 击 【确定 】 按 钮 后 即 完成 设 定 ， 设 置 如 
图 16-112 所 示 。 


表 16-9 “记录 集 ” 的 表格 设置 























图 16-112 【记录 集 】 对 话 框 


EEC) 绑 定 记录 集 后 ， 将 Re 记录 集中 的 inf title 字段 插入 至 admin.php 网 页 中 的 适当 
位 置 ， 如 图 16-113 所 示 。 














{Re, inf_title} Eo : [修改 ] [删除 ] 








图 16-113 ”将 记录 和 集 的 字段 插入 至 admin.php 网 页 中 


ECDIS 在 这 里 要 显示 的 不 单 是 一 条 信息 记录 ， 而 是 多 条 信息 记录 ， 所 以 要 加 入 【重复 
区 域 】 命 令 ， 再 选择 需要 重复 的 表格 的 一 行 ， 如 图 16-114 所 示 。 








[ {Re. inf_title} [修改 ] [ 喇 除 ] 





16-114 ”选择 重复 的 区 域 


EC 单 击 【应 用 程序 】 面 板 组 中 【服务 器 











行为 】 面 板 上 的 图 按钮 ， 在 弹出 的 下 拉 菜 | 一 二 
单 中 选择 【重复 区 域 】 命 令 ， 打 开 【 重 复 | se | 
区 域 】 对 话 框 ， 设 定 一 页 显示 的 数据 为 10 a 二 


条 记录 ， 如 图 16-115 所 示 。 
EEJDp 单 击 【确定 】 按 钮 回 到 编辑 页 面 ， 会 
发 现 先前 所 选取 要 重复 的 区 域 左 上 角 出 现 图 16-115 【重复 区 域 】 对 话 框 
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了 一 个 “重复 ”的 灰色 标签 ， 这 表示 已 经 完成 设 定 了 ， 如 图 16-116 所 示 。 





Si Te re 


16-116 ”添加 重复 区 域 效 果 


EC》 当 显示 的 信息 数据 大 于 10 条 ， 就 必须 
加 入 记录 集 分 页 功能 了 ， 在 【服务 器 行为 】 
面板 中 单 击 本 按钮 ， 在 弹出 的 下 拉 菜 单 中 
选择 【记录 集 分 页 】 一 【 移 至 第 一 页 】 命 


令 ， 添加 【第 一 页 】 选 项 ， 如 图 16-117 
所 示 。 





Meve To Specific Record 





使 用 同样 的 方法 添加 其 他 记录 集 分 页 信 ee 
息 ， 如 图 16-118 所 示 。 


图 16-117 记录 集 分 页 选项 










{Re. inf_title} [修改 ] [删除 ] 








如果 不 时 符合 此 计 如 果 生 合 此 计 如 果 行人 守 件 MI 名 二 
屁 一 内 逆 一 入 :站 一 个 | 报 泓 后 = 页 | 


图 16-118 ”记录 集 的 导航 条 效果 


ERE admin.php 是 提供 管理 者 链接 至 信息 编辑 的 页 面 ， 然 后 进行 新 增 、 修 改 与 删除 等 
操作 ， 设 置 了 4 个 链接 ， 各 链接 的 设置 如 表 16-10 所 示 。 


表 16-10 admin.php 页 面 的 表格 设置 
































标题 字段 fre_ inf title} content.php 
inf add.php 

Se 其 中 ，“ 标 题字 段 {re_inf title}” 

SS “修改 ”及 “删除 ”的 链接 必须 要 Se x 
人 | 一 一 
样 转 到 的 页 面 才 能 够 根据 参数 值 而 目标 [ie 
从 数据 库 将 某 一 笔 数据 筛选 出 来 再 ,中 四 本 一 一 一 一 
进行 编辑 。 Ta 














ECORD 首先 选取 【添加 信息 资讯 】， 选 择 
【插入 】 面 板 中 【常用 】 选 项 卡 下 的 图 16-119 【超级 链接 】 对 话 框 
【超级 链接 】 选 项 ， 打 开 Hyperlink 对 话 

框 ， 将 它 链 接 到 admin 文件 夹 中 的 information add.php 页 面 ， 如 图 16-119 所 示 。 

EC 在 右边 栏 中 添加 、 修 改 和 删除 文字 ， 并 选取 “修改 ”文字 ， 然 后 单 击 【应 用 程 





. 
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序 】 面 板 组 中 【服务 器 行为 】 面 板 上 的 四 | 按钮， 在 弹出 的 下 拉 菜 单 中 选择 Go To 
Detail Page 命令 ， 打 开 Go To Detail Page 对 话 框 ， 单 击 【 浏 览 】 按 钮 打开 【选择 文 
件 】 对 话 框 ， 选 择 admin 文件 夹 中 的 news_updphp， 其 他 保持 默认 设置 ， 如 图 16-120 
所 示 。 

ED 选取 “删除 ”文字 并 重复 上 面 的 操作 ， 要 转 到 的 页 面 改 为 information_del.php， 
如 图 16-121 所 示 。 





Go To Detail Page x Go To Detail Page x 
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[ 和 = 广 枉 一 
信息 页 [Er Wm ] 信和 页 nfornaticm eli5 || 浏览 | | 
化 URL 尖 下 [In 半生 人 可 URL 到 nf-16 | | 
记录 集 : 配 vv 记录 集 到 
i 烈 Eata | 
传递 现 有 基数 : 口 URL 参数 传递 预 有 移 才 : 口 URL 专 数 
口才 口才 
图 16-120 设置 “修改 ”的 转向 详细 页 面 图 16-121 设置 “删除 ”的 转向 详细 页 面 


选取 标题 字段 {Re.inf title} 并 重复 上 面 的 操作 ， 要 前 往 的 详细 页 面 改 为 
contentphp， 如 图 16-122 所 示 。 


Go To petal page x 


他 扩 “ple vobo 和 ov Riag titl v Ce] 
iaNR 页 : Fontmt mp | 到 
传阅 URL 学 数 : [int_id 设置 由 克 值 部 且 
记录 页 下 可 
列 int id ~ 
传递 现 有 需 数 : 口 URL 参数 
口才 站 





图 16-122 设置 {Re.inf_title} 的 转向 详细 页 面 


国 了 BY 单 击 【 确 定 】 按 钮 ， 完 成 转 到 详细 页 面 的 设置 ， 到 这 里 已 经 完成 了 信息 内 容 的 
编辑 。 现 在 来 设置 信息 分 类 ， 单 击 【 绑 定 】 面 板 上 的 出 按钮 ， 在 弹出 的 下 拉 菜 单 中 
选择 【记录 和 集 (查询 )】 命 令 ， 在 打开 的 【记录 集 】 对 话 框 中 输入 如 表 16-11 所 示 的 数 
据 ， 单 击 【 确 定 】 按 钮 后 完成 设置 ， 如 图 16-123 所 示 。 

国 囊 EY》 绑 定 记录 集 后 ， 将 Rel 记录 集中 的 type_name 字段 插入 至 admin.php 网 页 中 的 适 
当 位 置 ， 然 后 在 字段 的 后 面 输入 “修改 ”和 “删除 ”文字 信息 ， 如 图 16-124 所 示 。 

EEC 在 这 里 要 显示 的 不 单 是 一 条 信息 分 类 记录 ， 而 是 全 部 的 信息 分 类 记录 ， 所 以 要 
加 入 【服务 器 行为 】 中 的 【重复 区 域 】 功 能 ， 再 选择 需要 重复 的 表格 ， 如 图 16-125 
所 示 。 

EC 单 击 【 应 用 程序 】 面 板 组 中 【服务 器 行为 】 面 板 上 的 比 | 按 钮 ， 在 弹出 的 下 拉 菜 
单 中 选择 【重复 区 域 】 命 令 ， 打 开 【 重 复 区 域 】 对 话 框 ， 设 定 一 页 显示 的 数据 为 
【所 有 记录 】， 如 图 16-126 所 示 。 
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表 16-11 “记录 集 ” 表 格 的 设置 





























管理 员 你 好 ! 请 你 管理 信息 分 类 ! 











人 Rel. type_name}】 [修改 ] [ 暗 除 ] 





16-123 【记录 集 】 对 话 框 16-124 ”将 “记录 集 ” 的 字段 插入 至 
admin.php 网 页 中 
重复 区 域 x 
记录 集 -Rel ~ = 
显示 : 〇 10 记录 到 
帮助 


© 所 有 记录 
信 e1. type_name} [修改 ] [ 旺 除 ] | 


图 16-125 选择 要 重复 的 一 行 图 16-126 【重复 区 域 】 对 话 框 


单 击 【 确 定 】 按 钮 回 到 编辑 页 面 ， 会 发 现 先前 所 选取 要 重复 的 区 域 左 上 角 出 现 
了 一 个 “重复 ”的 灰色 标签 ， 这 表示 已 经 完成 设置 ， 如 图 16-127 所 示 。 

国 于 BY 首先 选取 左边 栏 中 的 “修改 ”文字 ， 然 后 单 击 【应 用 程序 】 面 板 组 中 【服务 器 
行为 】 面 板 上 的 出 按钮 ， 在 弹出 的 下 拉 菜 单 中 选择 Go To Detail Page 命令 ， 打 开 Go 
To Detail Page 对 话 框 ， 单 击 【 浏 览 】 按 钮 ， 打 开 【 选 择 文件 】 对 话 框 ， 选 择 admin 
文件 夹 中 的 type_updphp， 其 他 设置 保持 默认 ， 如 图 16-128 所 示 。 

EEDD 选取 “删除 ”文字 并 重复 上 面 的 操作 ， 要 前 往 的 详细 页 面 改 为 type_del.php， 如 

图 16-129 所 示 。 

EEEy 后 台 管理 是 管理 员 在 后 台 管理 入 口 页 面 admin login php 输入 正确 的 账号 和 密码 
后 才 可 以 进入 的 一 个 页 面 ， 所 以 必须 设置 限制 对 本 页 的 访问 权限 。 单 击 【应 用 程 
序 】 面 板 组 中 【服务 器 行为 】 面 板 中 的 出 按钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【用 户 身 
份 验证 】 一 【限制 对 页 的 访问 】 命 令 ， 如 图 16-130 所 示 。 














0 


全 el. type_name} [修改 ] [ 旺 除 ] 








16-127 ”添加 “重复 区 域 ”效果 





Go To Detail pag= x 





ad 习 
i ype_wpi. php [E-mu 取消 
rT | 
记录 集 : Be | 
inid | 
传 带 砚 有 多才 口 URL 地 下 
口才 




















16-128 ”设置 “修改 ”的 转向 详细 页 面 





Go To Detail Page 

















氏 接 -“ 轴 二” ~ 
详细 信息 页 : type_del. php 3 
传递 URL 参数 :inf -id 设置 为 以 下 项 83 值 
记录 集 Re 加 
Hind = 
传递 现 有 参数 口 URL 参数 
口才 单 多 雪 





Go To Deiail Page 


Go Te Related page 
拍 和 AD 委 





图 16-129 设置 “删除 ”的 转向 详细 页 面 
EESB 在 打开 的 【限制 对 页 的 访问 】 对 话 框 中 ， 选 中 【基于 以 下 内 容 进行 限制 】 为 


图 16-130 选择 【限制 对 页 的 访问 】 命 令 


【用 户 名 和 密码 】， 如 果 访 问 被 拒绝 ， 则 转 到 首页 index.php， 如 图 16-131 所 示 。 


ED》 单 击 【确定 】 按 钮 ， 就 完成 了 后 台 管理 主页 面 admin.php 的 制作 ， 预 览 效果 如 


our ITT 


图 16-132 所 示 。 


限制 于 次 的 沪 辣 


基于 以 下 内 容 过 行 限制 同月 疡 名 年 码 
口 AAS, EBA 
选取 可 别 











rc | 











16-131 【限制 对 页 的 访问 】 对 话 框 


16.4.3 ”新 增 信息 页 面 


Mang, Ma qe 
CT 
ee 村 拓 趟 覆 空 了 查 二 后 五 个 次 区 
ss San 
ne a 
HEE EN -WNT 
ae HA 


teeta 
in 


sis tt 
se 
ee 
tit the 
tie rot 
2 
em 
se 





16-132 ”后 台 主 页 面 预 览 效 果 


新 增 信息 页 面 information_add.php 主要 用 来 实现 插入 信息 的 功能 ， 详 细 操 作 步 又 如 下 。 
创建 information add.php 静态 页 面 ， 效 果 如 图 16-133 所 示 。 







i 


党 浇筑 哇 范 幅 江 苹 外 六 一 一 Z 底 漳 泗 同 蕉 上 状 ” 需 94 小 全 
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管理 员 ， 你 好 : 请 你 示 加 信息 ! 





ET 
信息 分 类 ; :作者 : 


























发 送 ]| 。 [ 重 写 」 。 项 * 吕 为 必 半 项 目 











16-133 ”新 增 信息 页 面 


EEC 单 击 【 绑 定 】 面 板 上 的 出 按钮 ， 在 弹出 的 下 拉 菜单 中 选择 【记录 集 (查询 )】 命 
令 ， 在 打开 的 【记录 集 】 对 话 框 中 ， 输 入 设 定 值 如 表 16-12 所 示 的 数据 ， 单 击 【 确 
定 】 按 钮 后 即 完成 设置 ， 如 图 16-134 所 示 。 





表 16-12 “记录 集 ” 的 表格 设 定 


Recordsetl 


information 





information type 


记录 集 x 
Recordsetl 入 
连接 information v| 定义 .… 了 消 
和 格 : nformation_ type 要 Ee 
LO 全 部品 
天 全 人 O Wi 是 





第 选 :无 ~ 
mr 孝 数 
排序 : 无 Y| 国 慰 








16-134 【记录 集 】 对 话 框 


EEIRS 绑 定 记录 集 后 ， 单 击 【信息 分 类 】 的 列表 菜单 ， 在 【信息 分 类 】 列 表 菜单 的 


【 属性】 面板 中 ， 单 击 区 五] 按钮 ， 在 打开 的 【动态 列表 /菜单 】 对 话 框 中 设置 
表 16-13 所 示 的 数据 ， 设 置 完成 后 如 图 16-135 所 示 。 














表 16-13 “动态 列表 /菜单 ”的 表格 设 定 


属 性 
来 自 记 录 集 的 选项 
值 


设置 值 





Recordsetl 
id 
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续 表 


type name 








选取 值 等 于 


单 击 【 选 取 值 等 于 】 右 侧 的 刍 按 钮 ， 打 开 【 动 态 数据 】 对 话 框 ， 在 其 中 选择 记 
录 集 的 type_name 字段 ， 如 图 16-136 所 示 。 


Recordsetl 记录 集中 的 type_name 字段 






































动态 列 雪 /可 里 x 
CE 
ne 在 玉音 ioml” ~ 
ee ETE gy 
wasn 到 到 ESE] | et 了 消 
直 [ 二 
| 
值 :tyre-id ~ 
i 习 
| im 区 FDC 四 柯 式 : 无 可 
| MO [pi echo fror RooordsoriT te] | 
16-135 【动态 列表 /菜单 】 对 话 框 图 16-136 【动态 数据 】 对 话 框 


ED 单 击 【 确 定 】 按 钮 ， 返 回 到 完成 动态 数据 的 绑 定 界面 ， 如 图 16-137 所 示 。 

EEC 将 光标 定位 在 【发 送 】 按 钮 左 侧 ， 选 择 【 插 入 】 一 【表单 】 一 【隐藏 域 】 菜 单 
命令 ， 命 名 为 “inf time”， 然 后 在 【属性 】 面 板 中 的 【 值 】 文 本 框 中 输入 以 下 代 
码 ， 如 图 16-138 所 示 。 


<?php echo date ("Y-m-d H:i:s")?> 



































动态 列表 / 药 单 x 
让 一 
wan 到 到 38 | 记 现 
值 标签 
来 自 记录 集 的 选 硕 。 Recordsetl ~ 
值 。 type-id ~ 
标签: type_nme ~ 
选取 信 等 于 [<Iphp echo Srov_Recordset1T | 二 i 隐藏 区 域 
inf_time 值 (WW) [<?php echo date ("Y-m-d Hi:s")? 多 
16-137 【动态 列表 /菜单 】 对 话 框 图 16-138 ”设置 隐藏 区 域 的 名 称 和 值 


四 TY 单 击 【应 用 程序 】 面 板 组 中 【服务 器 行为 】 面 板 上 的 四 |] 按钮， 在 弹出 的 下 拉 菜 
单 中 选择 【插入 记录 】 命 令 ， 打 开 【 插 入 记录 】 对 话 框 ， 输 入 表 16-14 所 示 的 数 
据 ， 并 设 定 【 插 入 后 ， 转 到 】 后 台 管 理 主页 面 admin.php， 如 图 16-139 所 示 。 





芍 沙 髓 不 洛 成 如 亦 由 忆 一 2 宣 洗 酒 同 落 讨 直 e 兴国 
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表 16-14 “插入 记录 ”的 表格 设 定 


属 性 设置 值 属 性 设置 值 
连接 information 自 forml 


插入 表格 information 元 表单 字段 与 数据 表 字 段 相对 应 
| | 








插入 后 ， 转 到 admin php 





EC 单 击 【确定 】 按 钮 完成 插入 记录 功能 ， 选 择 【 窗 口 】-~【 行 为 】 菜 单 命令 ， 打 
开 【 行 为 】 面 板 ， 单 击 【行为 】 面 板 上 的 四 按钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【检查 
表单 】 命 令 ， 打 开 【 检 查 表单 】 对 话 框 ， 设 置 【 值 】 为 【必需 的 】，【 可 接受 】 为 
【任何 东西 】， 如 图 16-140 所 示 。 


























A x 位 面 要 单 x 
一 三 
了 
3 取消 
EUR | 帮助 
i | 
i i 可 接受 图 任何 东西 。 。 〇 数字 
壤 入 局 转 到 [a | [| 口 电子 邮件 地 址 。 口 数 和 从 [| 到 [| 
图 16-139 【插入 记录 】 对 话 框 16-140 【检查 表单 】 对 话 框 


国 于 BY 单 击 【 确 定 】 按 钮 回 到 编辑 页 面 ， 就 完成 了 information add.php 页 面 的 设计 。 
保存 文件 后 预览 效果 ， 在 其 中 根据 提示 输入 需要 添加 的 信息 内 容 ， 如 图 16-141 所 示 。 

国 了 [DY 单 击 【 发 送 】 按 钮 即 可 将 信息 内 容 添加 到 网 站 后 台数 据 库 中 ， 并 在 管理 员 主 页 
面 中 显示 出 来 ， 如 图 16-142 所 示 。 





EG /ehoarm Po Osenaamm ol @ Ge 
Ee 


| Owe on] 


本 二 大和 人 补血 只 关上 








| 


rie 六 和 下 划 人 可， 闪光 认得 电化 
a ED 
术 ， 相当 间 和 守 、 并 雪人 果 于 入 ,以 生生 再! 二 和 能 富力 有 于 
和 2 se 于 级 上 炙 4 大 他人 
2 亲生 站 外人 
和 ,0 Be 人 
全" 红 Hr .a Tb 


王 红 素 丽 旭 ， 灾 律 助 虹 jx 


| 市 SY 




















图 16-141 ”添加 信息 图 16-142 成 功 添 加 信息 后 的 效果 
16.4.4 ”修改 信息 页 面 


修改 信息 页 面 information_upd.php 的 主要 功能 是 将 数据 表 中 的 数据 送 到 页 面 的 表单 中 进 


G3 


行 修改 ， 修 改 数据 后 再 将 数据 更 新 到 数据 表 中 。 
详细 操作 步骤 如 下 。 
国 于 打开 information updphp 页 面 ， 单 击 【 应 用 程序 】 面 板 组 中 【 绑 定 】 面 板 上 的 
二 按钮 ， 在 弹出 的 下 拉 菜单 中 选择 【记录 集 ( 查 询 )】 命 令 ， 在 打开 的 【记录 集 】 对 
话 框 中 输入 设 定 值 如 表 16-15 所 示 的 数据 ， 单 击 【和 确定】 按钮 后 即 完成 设置 ， 如 
图 16-143 所 示 。 


址 9 治国 





Z 芝 注 沽 同 落 六 


表 16-15 “记录 集 ” 的 表格 设 定 


information 


information 





加 江 由 趴 沽 诺 亚 杰 由 局 








16-143 【记录 集 】 对 话 框 


EEDR29 用 同样 的 方法 再 绑 定 一 个 记录 集 Recordset2， 在 【记录 集 】 对 话 框 中 输入 表 16-16 所 
示 的 数据 ， 该 记录 集 用 于 实现 下 拉 列 表 框 动态 数据 的 绑 定 ， 再 单 击 【确定 】 按 钮 完 
成 设置 ， 如 图 16-144 所 示 。 


表 16-16 “记录 集 ” 的 表格 设 定 


| 设置 值 | 属性 | 








16-144 ”设置 记录 集 Recordset2 
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EEJS 绑 定 记录 集 后 ， 将 记录 集 的 字段 插入 至 information_ upd.php 网 页 中 的 适当 位 
置 ， 如 图 16-145 所 示 。 


管理 员 ， 你 好 : 请 你 修改 信息 : 














信息 标题: ecordoetl, In tit1e] 
时 - 
信息 分 类 : 作者 : | {Recordsetl 








TRecordsetl. inf_content] 











EM 
图 16-145 字段 的 插入 


EEC 在 【更 新 时 间 】 一 栏 中 必须 取得 系统 的 最 新 时 间 ， 方 法 是 在 “更 新 时 间 ” 文 本 
域 【属性 】 面 板 的 【初始 值 】 中 加 入 代码 <%=now0%>， 如 图 16-146 所 示 。 


<?php echo date("Y-m-d H:i:s")?> 


// 取 得 系统 当前 时 间 





字符 宽度 m) 30 类 型 单行 6) ” 口 多 行 ) 。 口 密 码 @) 
inf_time | 最 多 字符 数 | “| 初始 值 | 人 ?php echo date("Y-m-d Hi:s")?> | 经 
禁用 中 ) 
口 R 读 中 




















图 16-146 ”加 入 代码 取得 最 新 时 间 


葬 于 BY 单 击 【信息 分 类 】 的 列表 菜单 ， 在 【信息 分 类 】 列 表 菜 单 的 【属性 】 面 板 中 ， 
单 击 区 “二 . 按钮， 在 打开 的 【动态 列表 /菜单 】 对 话 框 中 设置 表 16-17 所 示 的 数 
据 ， 如 图 16-147 所 示 。 


表 16-17 “动态 列表 /菜单 ”的 表格 设 定 











国 于 BY 单 击 【选取 值 等 于 】 后 面 的 【动态 数据 】 按 钮 ， 打 开 【 动 态 数据 】 对 话 框 ， 选 
择 Recordsetl 记录 集中 的 type id 字段 ， 如 图 16-148 所 示 。 


售 400 








REC eerie 司 
让 aaa 
Fi [eens - 


这 了 全 于 名 

















eB [C7?php echo Srov_Receordsetl[ type] 











图 16-147 【动态 列表 /菜单 】 对 话 框 


EEC 将 光标 定位 在 【 重 设 】 按 钮 右 人 出， 选择 【插入 】~~【 表 单 】 一 【人 隐藏】 菜单 命 


令 ， 命 名 为 “inf id”， 然 后 在 
图 16-149 所 示 。 





<?php echo $row Recordsetl['inf id']; ?> 


EC) 完成 表单 的 布置 后 ， 在 information_upd.php 页 面 中 单 击 【 应 用 程序 】 面 板 组 中 
【服务 器 行为 】 面 板 上 的 此 按钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【更 新 记录 】 命 令 ， 如 


图 16-150 所 示 。 


动态 文本 
EE Go To Detail Page 


隐藏 区 域 
linfid | 值 W) |<?php echo $row_Recordsetl[ inf | 到 插入 记录 


16-148 【动态 数据 】 对 话 框 





【属性 】 面 板 中 的 【 值 】 文 本 框 中 输入 以 下 代码 ， 如 


其 油 岂 史 尖 出 如 击溃 一 本 六 三 站 二 9 兴国 


MA 





Go To Related page 











en 


图 16-149 设置 隐藏 区 域 的 名 称 和 值 16-150 ”选择 【更 新 记录 】 命 令 
EEJpgp 在 打开 的 【更 新 记录 】 对 话 框 中 ， 输 入 表 16-18 所 示 的 值 ， 如 图 16-151 所 示 。 




















表 16-18 “更 新 记录 ”的 表格 设 定 
属 性 设置 值 

提交 值 ， 自 forml 

连接 information 

更 新 表格 information 

表单 元 素 表单 字段 与 数据 表 字 段 相 对 应 
唯一 键 列 inf id 

在 更 新 后 ， 转 到 admin . 
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EC 单 击 【 确 定 】 按 钮 ， 完 成 修改 信息 页 面 的 设计 。 预 览 效 果 如 图 16-152 所 示 。 














EF 时 志 ”。 红 灾 最 突 出 隐 全 高 是 一 
竹 和 Ti 





， 养 于 排 亲 
科 的 后 妆 本 人 站 厅 它 和 于 下 ， 红 实生 机 不 汉 
生生 间 ， 各 有 友和 全 出， 四 此 后 天 


再 昌 

pe Eee 习 补 亏 

让 二 可 少 疗 中环 、 骨 病 = EE 

作为 “文本 人 5 。 证 们 直 光 世 雪 迷 各 方 中 忆 亲 了 关 红 于 、 扣 了 入 站 一 也 
涵 ， 和 全 全 


让 折 
记性 站 训 和 冰 ， 类 生 国 如 时 人 只 二 人 用 小 
炎 寺 扫 下 下 红 记 、 柱 国 和 红 交 部 有 补 自 的 功 戏 ， 高 出 的 区 于 各 洒 


> 

一 所 红 束 邓 光 ， 克 神 册 甩 

存 本 新 后 ， 转 到: [dnin. php EE 让 医 上 讲 ， 女 性 有 器 郁 丰 空 , 心 袍 不 字符 症状 ， 可 赂 运 各 百 全 、 
人 | 二 六 同音 ， 本 划 久 增发 导 纪 素 灾 视 的 站 再 。 


















































图 16-151 【更 新 记录 】 对 话 框 16-152 ”修改 信息 页 面 的 效果 


EEC 例如 ， 这 里 将 该 信息 的 标题 修改 为 “ 红 束 的 六 种 吃 法 ! ”， 然 后 单 击 【 更 新 】 
按钮 ， 页 面 会 自动 转 到 admin.php 页 面 中 ， 在 其 中 可 以 看 到 修改 之 后 的 信息 ， 如 
图 16-153 所 示 。 


健康 ## 生 WI 号 


代 蛮 的 六 ee 
fghhhhh 
管理 员 你 好 ! 清 作 添加 信息 资讯 
壕 加 信息 次 设 秋季 二 卜 春 人 参 ， 从 头 到 尽 几 葛 人 强 身 们 体 
添加 信息 分 类 唤 上 银 练 比 早上 阔 果 好 ? 建议 电 后 1 小 时 开始 
管理 员 你 好 ! 清 作 管理 信息 分 类， 牛 加 不 能 空 有 名 ? 蝎 千 如 有 五 个 谍 区 
类 型 管理 秋季 干燥 上 火 4 大 食疗 方 降 炙 也 爆 
相生 之 揪 。。【 信 次 ] CIN] 秋天 养生 汤 首选 教 保 健 法 荣 
放 信 养生。 【[ 修 继 ] [出 
Po 或 他 康 养生 弗 有 效 调理 防 洛 册 炎 


谈 茶 必要 论 水 四 种 水 ， 哪 一 种 更 利于 泡 茶 ? 


图 16-153 ”修改 标题 后 的 效果 
16.4.5 ”删除 信息 页 面 


删除 信息 页 面 的 方法 与 修改 页 面 的 方法 差不多 ， 其 方法 是 将 表单 中 的 数据 从 站 点 的 数据 
表 中 删除 。 
详细 操作 步骤 如 下 。 
EEC 打开 information delphp 页 面 ， 单 击 【 应 用 程序 】 面 板 组 中 【 绑 定 】 面 板 上 的 
出 按钮 ， 接 着 在 弹出 的 下 拉 菜 单 中 选择 【记录 集 (查询 )】 命 令 ， 在 打开 的 【记录 
集 】 对 话 框 中 输入 设 定 值 如 表 16-19 所 示 的 数据 ， 再 单 击 【 确 定 】 按 钮 后 即 完成 设 
置 ， 如 图 16-154 所 示 。 
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Z 全 粒 沽 同 落 六 


Bla 


警 沙 出 趴 洁 嵌 如 覃 十 局 











第 
表 16-19 “记录 集 查询 ”的 表格 设 定 
属 性 设置 值 i i 
名 称 Recordsetl 
连接 information 
表格 information 
记 示 集 x 


16-154 【记录 集 】 对 话 框 


EE2p 用 同样 的 方法 再 绑 定 一 个 记录 集 ， 在 打开 的 【记录 集 】 对 话 框 中 ， 输 入 设 定 值 
如 表 16-20 所 示 的 数据 ， 单 击 【确定 】 按 钮 后 完成 设置 ， 如 图 16-155 所 示 。 


表 16-20 “记录 集 ” 的 表格 设 定 


| Recorssep | 列 | 和 i 
|infomation | 
| ntormation me | 让 


ES 绑 定 记录 集 后 ， 将 记录 集 的 字段 插入 至 information_del.php 网 页 的 适当 位 置 ， 如 
图 16-156 所 示 。 其 中 需要 注意 的 是 将 inf id 字段 拖 电 到 隐藏 域 上 。 


管理 员 ， 你 好 ! 你 要 出 队 此 信息 吗 ? 
| {Recordsetl. inf_title} 


虽 作者 : {Recordsetl 
[Recordsetl. inf_content} 





























图 16-155 【记录 集 】 对 话 框 图 16-156 ”字段 的 插入 


EC 绑 定 记录 集 后 ， 单 击 【信息 分 类 】 的 菜单 ， 在 【信息 分 类 】 菜 单 的 【属性 】 面 
板 中 ， 单 击 区 _ 花 .] 按 钮 ， 在 打开 的 【动态 列表 /菜单 】 对 话 框 中 设置 如 表 16-21 


®. 
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所 示 的 数据 ， 如 图 16-157 所 示 。 
表 16-21 “动态 列表 /菜单 ”的 表格 设 定 























属 性 设置 值 
来 自 记录 集 的 选项 Recordset2 
值 type id 
标签 type_name 
选取 值 等 于 Recordsetl 记录 集中 的 type id 字段 
动 杰 列 天 /本 扭 x 
荡 单 “tyge mane 在 表单 “Eernl” ~ 一 
wr 加 加 aa | wm 
、 和信 标签 








来 自 记录 第 的 过 项 ”| Beaerlaste 











格式 ; 无 ~ 














图 16-157 ” 绑 定 “ 动 态 列表 /菜单 ” 


ECG 完成 表单 的 布置 后 ， 要 在 information_del.php 页 面 中 单 击 【应 用 程序 】 面 板 组 中 
【服务 器 行为 】 面 板 上 的 此 按钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【删除 记录 】 命 令 ， 在 
打开 的 【删除 记录 】 对 话 框 中 输入 设 定 值 如 表 16-22 所 示 的 数据 ， 设 置 如 图 16-158 
所 示 。 


表 16-22 “删除 记录 ” 设 定 


首先 检查 是 否 已 定义 变量 主键 列 


连接 
删除 后 ， 转 到 


EEJRD 单 击 【确定 】 按 钮 ， 完 成 删除 信息 页 面 的 设计 。 然 后 进入 网 站 的 后 台 管理 中 
心 ， 如 图 16-159 所 示 ， 在 这 里 可 以 对 网 页 的 信息 进行 删除 和 修改 处 理 。 





一 x 








和 CE 
mk 
一 一 
16-158 【删除 记录 】 对 话 框 16-159 ”后 台 管 理 中 心 
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EC 单 击 想 要 删除 信息 后 面 的 【删除 】 链 接 ， 进 入 删除 信息 页 面 ， 如 图 16-160 所 示 。 
ED 单 击 【删除 】 按 钮 ， 返 回 到 后 台 管理 中 心 页 面 中 ， 可 以 看 到 选择 的 信息 已 被 删 
除 ， 如 图 16-161 所 示 。 


和 ， 人 后! 信和 此 人 人 © 名 天 ely rp 


J 的 各 去! 
BR WA 一 一 本 本 有 
| es ee ee 的 上 白人 沁 早 上 隐 果 营建 机 庆 后 1 时 开 邓 
| i tm NE 
+ 请 人 和 分! 秀和 地 上 从 《大 六 广 了 灾 到 有 
sn 2 | 和 下 闻 生 潭 到 5 人 提 | 
者 生 之 其 [从 区] CBA] 17 江 旨 床 状 生 融 有 区 调 理 咏 汪 和 从 


该 局 害 主 [入 长] [ 蜀 际 ] 
i .it 本 必 村 水 四 加 水， 几 一 和 下 于 1 


| 次 季 吾 罚 员 守 怎 勾 力 ? 三 种 这 旺 荔 闪 快 过 好 
i 多 各 天气 世 和 记者 生 到 





加 沙 阻 趴 洛 嵌 名 蛮 目 书 一 一 2 阐 漂 酒 司 孙 状 ” 几 91 小 便 


图 16-160 删除 信息 页 面 图 16-161 删除 信息 后 的 效果 


16.4.6 ”新 增 信息 分 类 页 面 


新 增 信息 分 类 页 面 type_add.php 的 功能 是 将 页 面 的 表单 数据 新 增 到 information_type 数据 
表 中 。 
详细 操作 步骤 如 下 。 加 
EC 打开 type_add.php 页 面 ， 单 击 【 应 用 程序 】 面 板 组 中 【 绑 定 】 面 板 上 的 出 | 按 
钮 ， 接 着 在 弹出 的 下 拉 菜 单 中 选择 【记录 集 (查询 )】 命 令 ， 在 打开 的 【记录 集 】 对 话 
框 中 输入 设 定 值 如 表 16-23 所 示 的 数据 ， 再 单 击 【 确 定 】 按 钮 完成 设置 ， 如 图 16-162 
所 示 。 





表 16-23 “记录 集 查 询 ” 的 表格 设 定 


i 




















16-162 【记录 集 】 对 话 框 
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EEJR2) 单 击 【应 用 程序 】 面 板 组 中 【服务 器 行为 】 面 板 上 的 击 | 按钮 ， 在 弹出 的 下 拉 菜 
单 中 选择 【插入 记录 】 命 令 ， 在 打开 的 【插入 记录 】 对 话 框 中 输入 设 定 值 如 表 16-24 
所 示 的 数据 ， 并 设 定 新 增 数 据 后 转 到 系统 管理 主页 面 admin.php， 如 图 16-163 














所 示 。 
表 16-24 “插入 记录 ”的 表格 设 定 
属 性 设置 值 

连接 information 

插入 表格 information 

插入 后 ， 转 到 admin) 

提交 值 ， 自 forml 

表单 元 素 表单 字段 与 数据 表 字 段 相对 应 





EEJUS 选择 【窗口 】 一 【行为 】 菜 单 命令 ， 打 开 【 行 为 】 面 板 ， 单 击 【 行 为 】 面 板 中 
的 外 按钮 ， 在 弹出 的 下 拉 菜单 中 选择 【检查 表单 】 命 令 ， 打 开 【 检 查 表单 】 对 话 
框 ， 设 置 【 值 】 为 【必需 的 】，【 可 接受 】 为 【任何 东西 】， 如 图 16-164 所 示 。 























Pr x 
sr, CE 和 > 
or | En Ee ”| 蕊 到 二 
pa 网 | | 
L_ 了 
值 : 回 性 
个 要 国 fE 休 4 西 。。 〇 由 
国生 二 a 口 和 8 地 相 口 数 从 [到] 
16-163 ” 设 定 【 插 入 记录 】 对 话 框 16-164 【检查 表单 】 对 话 框 


EEC 单 击 【确定 】 按 钮 ， 完 成 type_add.php 页 面 设计 。 在 IE 浏览 器 中 打开 网 站 后 台 
管理 中 心 页 面 ， 在 其 中 单 击 【添加 信息 分 类 】 链 接 ， 如 图 16-165 所 示 。 


ou [DID 


I 


二 本 人 蔚 ， 内 冯 到 是 过 各 上 这 届 他 


和 全 人 并! 直 部 地 加 全 济 汉 






二! 
na | 
失 生 之 道 [个] 1g] 
这 Ss 和 [六 ] BR] 
二 吉 s 生 [人 天 ] UR 








图 16-165 单 击 【 添 加 信息 分 类 】 链 接 


国 于 BY 打开 【添加 类 型 】 页 面 ， 在 【信息 分 类 名 称 】 文 本 框 中 输入 “四 季 养 生 ”， 如 
图 16-166 所 示 。 





信 406 


区 于 BY 单 击 【添加 】 按 钮 ， 即 可 完成 信息 分 类 的 添加 操作 ， 打 开 “ 健 康 养生 ”网 站 的 
首页 ， 在 其 中 可 以 看 到 添加 的 养生 分 类 信息 “四 季 养 生 ”， 如 图 16-167 所 示 。 


如 归来 放 全 /二 2 


运动 RM 记 身 拉 坟 机 
养生 户外 去 村 着 气 四 












养生 分 类 最 新 养生 资讯 Information 
管理 员 ! 请 你 添加 信息 分 类 ! 巍 适 - 
深信 着 生 二 97 笠 柜 法 ! 201719129 18:20:29 
PE Bn 荐 放生 条 季 槛 卜 条 人 车， 从 闷 开 层 屹 要 个 玛 身 健 侯 2017/3114 18:40 .3 
un 人 旷 上 狠 株 比 军 上 千 采 好 建 训 W 后 ! 时 下 把 B017/315 11:26 好 
16-166 【添加 类 型 】 页 面 16-167 ”添加 类 型 后 的 效果 


16.4.7 ”修改 信息 分 类 页 面 


修改 信息 分 类 页 面 type_updphp 的 功能 是 将 数据 表 中 的 数据 送 到 页 面 的 表单 中 进行 修 
改 ， 修 改 数据 后 再 更 新 至 数据 表 中 。 
详细 操作 步骤 如 下 。 
EC 打开 type_upd.php 页 面 ， 并 单 击 【应 用 程序 】 面 板 组 中 【 绑 定 】 面 板 上 的 出 按 
钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【记录 集 ( 查 询 )】 命 令 ， 打 开 【 记 录 集 】 对 话 框 ， 在 打 
开 的 【记录 集 】 对 话 框 中 输入 设 定 值 如 表 16-25 所 示 的 数据 ， 单 击 【确定 】 按 钮 后 
就 完成 设 定 了 ， 如 图 16-168 所 示 。 


表 16-25 “记录 集 ” 的 表格 设 定 


Recordsetl 


ype id 二 URI 参数 type id 
EECJDp 绑 定 记录 集 后 ， 将 记录 集 的 字段 插入 至 type_upd.php 网 页 中 的 适当 位 置 ， 如 
图 16-169 所 示 。 其 中 需要 注意 的 是 将 type_id 字段 拖 忠 到 隐藏 域 上 。 





记录 和 

| be 

| ecordsetl | 

i 可 | 已 羡 
3 


委 交 infzmacion. type 





管理 员 ! 请 你 修改 信息 分 类 ! 


分 类 名 称 : | {Recordset1.type_nane} | 出 


Ca 








图 16-168 【记录 集 】 对 话 框 图 16-169 ”字段 的 插入 
国 于 BY 完成 表单 的 布置 后 ， 在 type_updphp 页 面 中 ， 单 击 【 应 用 程序 】 面 板 组 中 【 服 





警 洲 崩 不 洛 碟 如 亦 央 忆 一 2 齐 糙 到 岂 菠 装 ” 几 91 小 辆 
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务 器 行为 】 面 板 上 的 四 按钮， 在 弹出 的 下 拉 菜 单 中 选择 【更 新 记录 】 命 令 ， 在 打开 
的 【更 新 记录 】 对 话 框 中 ， 输 入 设 定 值 如 表 16-26 所 示 ， 设 定 后 如 图 16-170 所 示 。 


表 16-26 “更 新 记录 ”的 表格 设 定 


属 性 设置 值 属 性 
连接 information 在 更 新 后 ， 转 到 
更 新 表格 information type 提交 值 ， 自 


EC 单 击 【 确 定 】 按 钮 ， 完 成 修改 信息 分 类 页 面 的 设计 。 在 正 浏览 器 中 打开 网 站 后 
台 管 理 中心 页 面 ， 在 其 中 单 击 信 息 分 类 后 面 的 【修改 】 链 接 ， 如 图 16-171 所 示 。 



































| ou WE 
i x 健康 养生 WA Ri 了。 
一 -一 寺 林 的 六 种 电 寺 1 
| 但 理 肌 章 好 ， 而 你 水 加 信息 臣 各 次 对本 上 窗 人 扰 ， 儿 头 到 尿 临 梦 卜 可 身 能 舍 
洒 信 记 汉语 区 上 肖 比 曙 上 条 好 当归 后 1 时 开始 
et 牛 如 不 能 袖 唱和 唱 牛 如 有 五 十 六 区 
WN 以 和 于 4 大 人 太阳 
Dead mn 这 天 下 生 酒 痢 吉 5 各 伯 民 开 
养生 之 遍 [校区 ] 【出售 
| i 全 和 他 养生 辣 有 直 记 到 内 
可 交 为 站 数 “日 六 证 动 着 生起 ] [本 内] 放 环 名 要 治水 四 各 小， 哪 一 特 更 利 到 东 ? 
在 更 新 后 转 到 [adnin. php ] 辐 本 一 网 季 关 主人 缔 术 ] 1 从] 
i 区 过 安居 和 和 三 入 骂 册 作 二 内 
二 失地, 军 记 并 和 到 
: 、 
图 16-170 【更 新 记录 】 对 话 框 图 16-171 后 台 管 理 中 心 页 面 


EE 了 9 打开 【修改 类 型 】 页 面 ， 在 其 中 可 以 对 信息 进行 修改 ， 如 这 里 将 “四 季 养 生 ” 
修改 为 “冬季 养生 ”， 如 图 16-172 所 示 。 

EED 单 击 【 修 改 】 按 钮 ， 即 可 完成 信息 分 类 的 修改 操作 。 进 入 后 台 管理 中 心 页 面 
中 ， 可 以 看 到 修改 后 的 结果 ， 如 图 16-173 所 示 。 


ut LT 


全 本 的 六 得 当 1 





人 从! 交合 法 全 有 妆 计 半生 革 于 和 全 ， 检 六 (民政 培 公休 
王储 时 当 
本 雪人 司 从 类 


本 上 二 性 人 早上 欣 昌 人 健 充 杀 后 4 下 的 


加 能 空 项 起 阳 直 如 六 十 上 
Ge 


管理 员 ! 请 你 修改 信息 分 类 ! 二 上 4 太太 





a a 孙 天 关 生 澳 首 汉 5 或 保 亿 下 竺 

分 类 名 称 : 。 | 冬季 养生 2 1 
a Eant ll (Ma) OE 

图 16-172 修改 分 类 名 称 图 16-173 ”修改 后 的 结果 


16.4.8 ”删除 信息 分 类 页 面 


删除 信息 分 类 页 面 type_delphp 功能 是 将 表单 中 的 数据 从 站 点 的 数据 表 information_type 
中 删除 。 详 细 操作 步骤 如 下 。 


Dd 
使 408 


EC 打开 type delphp 页 面 ， 单 击 【应 用 程序 】 面 板 组 中 【 绑 定 】 面 板 上 的 此 按 
钮 ， 在 弹出 的 下 拉 菜单 中 选择 【记录 集 (查询 )】 命 令 ， 在 打开 的 【记录 集 】 对 话 框 中 
输入 设 定 值 如 表 16-27 所 示 的 数据 ， 再 单 击 【和 确定】 按钮 完成 设置 ， 如 图 16-174 
所 示 。 

EEC 绑 定 记录 集 后 ， 将 记录 集 的 字段 插入 至 type_del.php 网 页 中 的 适当 位 置 ， 如 

图 16-175 所 示 。 其 中 需要 注意 的 是 将 type_id 字段 拖 电 到 隐藏 域 上 。 


表 16-27 “记录 集 查询 ”的 表格 设 定 





Recordsetl 


information 


information type 


























入 
连接 :infornation ~ [定义 2 
表格 :information_type Y 一 
站 和 而 
菠 选 : type_id v= ~ 

WHL 名 数 Smid | 管理 员 ! 您 确定 要 删除 此 分 类 信息 吗 ? 
排序 :无 J 于 分 类 名 称 : | TRectype.type-nanej] ”| 加 

定量 了 
16-174 【记录 集 】 对 话 框 16-175 ”字段 的 插入 


ECRS) 单 击 【应 用 程序 】 面 板 组 中 【服务 器 行为 】 面 板 上 的 外 | 按钮， 在 弹出 的 下 拉 菜 
单 中 选择 【删除 记录 】 命 令 ， 在 打开 的 【删除 记录 】 对 话 框 中 输入 设 定 值 如 表 16-28 
所 示 ， 设 置 如 图 16-176 所 示 。 


表 16-28 “删除 记录 ” 设 定 
属 性 





首先 检查 是 否 已 定义 变量 








主键 值 主键 列 ype id 
连接 主键 值 URL 参数 type_id 
表格 information type admin php 


ER 代码 加 入 完成 后 ， 在 正 浏览 器 中 打开 后 台 管 理 中 心 页 面 ， 单 击 “ 冬 季 养生 ” 信 
息 分 类 后 面 的 【删除 】 超 链接 ， 如 图 16-177 所 示 。 
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16-176 【删除 记录 】 对 话 框 16-177 后台 管理 中 心 页 面 


EECD 即 可 将 该 信息 分 类 删除 ， 可 以 看 到 后 台 管 理 中 心 页 面 中 已 经 不 存在 该 信息 分 类 
了 ， 如 图 16-178 所 示 。 


ss “ [将 


红 杰 的 六 种 启 达 : 


钦 季 蓝 仆 要 人 大 ， 欠 头 到 忆 吃 划 八 强身 健 体 
筷 理 所 你 好 :请 你 漆 加 信息 过 讯 


级 加 信息 资讯 跷 上 铬 炼 比 早上 效果 好 ? 建议 旷 饭 后 1 小 时 开始 
水 吉 信 息 分 类 牛 基 不 能 空 最 蝎 ? 蝎 咎 奶 有 五 个 该 区 
管理 员 你 好 * 请 区 管理 信息 分 类 秋季 干 媛 上 火 《 大 食疗 方 隧 火 河 坦 
类型 a 多 天 并 生 汤 首 过 5 莉 保 健 世 订 


养生 之 道 【让 改 ] [NJ 
钦 人 养生 。。【[ 申 改 ] [CN] Wn 
生动 村 生 。。【[ 信 ] [WA] 其 要 这 水 办 水 ， 有 一 和 更 利于 起 芝 ? 


攻 李 在 旱 感 定 怎 义 办 ? 三 各 饮品 助 你 全 点 好 
图 16-178 ”删除 信息 分 类 后 的 效果 


至 此 ， 网 站 信息 资讯 管理 系统 开发 完毕 ， 读 者 可 以 将 本 章 开发 信息 资讯 管理 系统 的 方法 
应 用 到 实际 的 大 型 网 站 建设 中 。 


7 医 健 大 养生 弗 有 效 调 理 防治 商 类 


4 全 
第 4 篇 
高 手 秘 条 


和 第 17 章 让 别人 浏览 我 的 成 果 一 一 网 站 的 测试 与 发 布 
外 第 18 章 增加 网 站 的 点 击 率 一 一 网 站 优化 与 推广 
和 a 第 19 章 打造 坚实 的 堡垒 一 一 网 站 安全 与 防御 


第 17 章 
让 别人 浏览 我 的 
成 果 一 网 站 的 
测试 与 发 布 





将 本 地 站 点 中 的 网 站 建设 好 后 ， 需 要 将 站 点 上 传 到 远 端 服务 器 上 ， 供 Internet 
上 的 用 户 浏览 ， 不 过 在 上 传 之 前 ， 还 需要 对 站 点 文件 进行 测试 。 本 章 就 来 介绍 如 何 
测试 与 发 布 网 站 。 
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和 Dreamweaver CC 动态 网 站 开发 


案例 课堂 (第 2 版 ) 罗 一 


17.1 上 传 网 站 前 的 准备 工作 


在 将 网 站 上 传 到 网 络 服务 器 之 前 ， 首 先 要 在 网 络 服务 器 上 注册 域名 和 申请 网 络 空间 ， 同 
时 ， 还 要 对 本 地 计算 机 进行 相应 的 配置 ， 以 完成 网 站 的 上 传 。 


17.1.1 注册 域名 


域名 可 以 说 是 企业 的 “网 上 商标 ”， 所 以 在 域名 的 选择 上 要 与 注册 商标 相符 合 ， 以 便于 
记忆 。 

在 申请 域名 时 ， 应 该 选择 短 且 容易 记忆 的 域名 ， 另 外 ， 最 好 还 要 和 客户 的 商业 有 直接 的 
关系 ， 尽 可 能 地 使 用 客户 的 商标 或 企业 名 称 。 


17.1.2 ”申请 空间 


域名 注册 成 功 后 ， 需 要 为 自己 的 网 站 在 网 上 安 个 “家 ”， 即 申请 网 站 空间 。 网 站 空间 是 
指 用 于 存放 网 页 的 ， 置 于 服务 器 中 的 可 通过 国际 互联 网 访问 的 硬盘 空间 ( 即 用 于 存放 网 站 的 服 
务 器 中 的 硬盘 空间 )。 

在 注册 了 域名 之 后 ， 还 需要 进行 域名 解析 。 域 名 是 为 了 方便 记忆 而 专门 建立 的 一 套 地 址 
转换 系统 。 要 访问 一 台 互 联网 上 的 服务 器 ， 最 终 还 必须 通过 IP 地 址 来 实现 ， 域 名 解析 就 是 将 
域名 重新 转换 为 IP 地址 的 过 程 。 

一 个 域名 只 能 对 应 一 个 人 地 址 ， 而 多 个 域名 则 可 同时 被 解析 到 一 个 PP 地 址 。 域 名 解析 
需要 由 专门 的 域名 解析 服务 器 (DNS) 来 完成 。 


17.2 测试 网 站 


网 站 上 传 到 服务 器 后 ， 需 要 做 的 工作 就 是 在 线 测 试 网 站 ， 这 是 一 项 十 分 重要 又 非常 烦琐 
的 工作 。 在 线 测试 工作 包括 测试 网 页 外 观 、 测 试 链接 、 测 试 网 页 程序 、 检 测 数据 库 以 及 测试 
下 载 时 间 是 否 过 长 等 。 


17.2.1 案例 1 一 一 测试 站 点 范围 的 链接 


测试 网 站 超 链接 也 是 上 传 网 站 之 前 必 不 可 少 的 工作 之 一 。 对 网 站 的 超 链 接 逐 一 进行 测 
试 ， 不 仅 能 够 确保 访问 者 打开 链接 目标 ， 还 可 以 使 超 链 接 目 标 与 超 链 接 源 保持 高 度 的 统一 。 
在 Dreamweaver CC 中 进行 站 点 各 页 面 超 链接 测试 的 操作 步骤 如 下 。 
EEIDp 打开 网 站 的 首页 ， 在 窗口 中 选择 【站 点 】 一 【检查 站 点 范围 的 链接 】 菜 单 命 
令 ， 如 图 17-1 所 示 。 


EC 在 Dreamweaver CC 设计 器 的 下 端 弹出 【链接 检查 器 】 面 板 ， 并 给 出 本 页 面 的 检 


测 结果 ， 如 图 17-2 所 示 。 


RE 


17-1 选择 【检查 站 点 范围 的 链 
接 】 菜 单 命令 


EECDRUB9 如 果 需 要 检测 整个 站 点 的 超 链接 时 ， 单 击 左 侧 的 区 按钮 ， 在 弹出 的 下 拉 菜 单 中 
选择 【检查 整个 当前 本 地 站 点 的 链接 】 命 令 ， 如 图 17-3 所 示 。 
EEC 在 【链接 检查 器 】 面 板 底部 弹出 整个 站 点 的 检测 结果 ， 如 图 17-4 所 示 。 





| 


























memberrsgokphp 














填 尖 朵 收 泻 避 民 习 一 一 泪 泽 否 浊 牙 吾 盖 洱 乒 机 小 全 


17-2 【链接 检查 器 】 面 板 











pp GG 


Be /add 
[Be /compony sal 
| 二 | /Connections/userphp 


5e /memberfimages/02_01.9if 
[So /member/images/Snap1.gif 
5» /member/images/Snap10.9if 











17-3 ”检查 整个 当前 网 站 








图 17-4 ”站 点 测试 结果 


17.2.2 ”案例 2 一 一 改变 站 点 范围 的 链接 


更 改 站 点 内 某 个 文件 的 所 有 链接 的 具体 操作 步骤 如 下 。 

EEC) 在 窗口 中 选择 【站 点 】 一 【改变 站 点 范围 的 链接 】 菜 单 命令 ， 打 开 更 改 整 个 站 
点 链接 对 话 框 ， 如 图 17-5 所 示 。 

EECJPy9 在 【更 改 所 有 的 链接 】 文 本 框 中 输入 要 更 改 链接 的 文件 ， 或 者 单 击 右边 的 【 浏 
览 文件 】 按 钮 回 ， 在 打开 的 【选择 要 修改 的 链接 】 对 话 框 中 选中 要 更 改 链接 的 文 
件 ， 然 后 单 击 【 确 定 】 按 钮 ， 如 图 17-6 所 示 。 

EECIe) 在 【 变 成 新 链接 】 文 本 框 中 输入 新 的 链接 文件 ， 或 者 单 击 右边 的 【浏览 文件 】 
按钮 铝 ， 在 打开 的 【选择 新 链接 】 对 话 框 中 选中 新 的 链接 文件 ， 如 图 17-7 所 示 。 

EC 单 击 【确定 】 按 钮 ， 即 可 改变 站 点 内 某 个 文件 的 链接 情况 ， 如 图 17-8 所 示 。 
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17-6 【选择 要 修改 的 链接 】 对 话 杠 












































| 更 改 整个 站 点 链接 (站 点 - 测试 网 站 ) X 
更 次 所 有 的 岗 接 (H): 
/memberindex.php 已 取消 (C) 
sk Dsl ~ 
mmm [On -| Sp pape a [memberhognfaiprp 1G Er 
aaa CE 一 一 一 
17-7 【选择 新 链接 】 对 话 框 17-8 更改 整 个 站 点 链接 


17.2.3 ”案例 3 一 一 查找 和 替换 


在 Dreamweaver CC 中 ， 对 整个 站 点 中 所 有 文档 进行 源 代码 、 标 签 等 内 容 查找 和 替换 的 具 
体操 作 步 又 如 下 。 
四 IY 选择 【编辑 】 一 【查找 和 替换 】 菜 单 命令 ， 如 图 17-9 所 示 。 
ES 打开 【查找 和 蔡 换 】 对 话 框 ， 在 【查找 范围 】 下 拉 列 表 框 中 可 以 选择 【当前 文 
档 】、【 所 选 文 字 】、【 打 开 的 文档 】 和 【整个 当前 本 地 站 点 】 等 选项 ， 在 【 搜 
索 】 下 拉 列 表 框 中 可 以 选择 对 【文本 】、【 源 代码 】 和 【指定 标签 】 等 内 容 进行 搜 
索 ， 如 图 17-10 所 示 。 
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17-9 选择 【查找 和 替换 】 命 令 17-10 【查找 和 替换 】 对 话 框 


全‘ 


EEJsp 在 【查找 】 文本 框 中 输入 要 查找 的 具体 内 容 ; 在 【 蔡 换 】 文 本 框 中 输入 要 蔡 换 

的 内 容 ; 在 【选项 】 选 项 组 中 可 以 设置 【区 分 大 小 写 】、【 全 字 匹 配 】 等 选项 。 单 
二 【查找 下 一 个 】 按 钮 或 者 【 蔡 换 】 按 钮 ， 就 可 以 完成 对 页 面 内 指定 内 容 的 查找 和 
蔡 换 操作 。 
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17.3 上 传 网 站 


网 站 测试 好 以 后 ， 接 下 来 最 重要 的 工作 就 是 上 传 网 站 。 只 有 将 网 站 上 传 到 远程 服务 器 
上 ， 才 能 让 浏览 者 浏览 。 设 计 者 既 可 利用 Dreamweaver 软件 自 带 的 上 传 功能 ， 也 可 利用 专门 
的 FTP 软件 上 传 网 站 。 


17.3.1 案例 4 一 一 使 用 Dreamweaver 上 传 网 站 


在 Dreamweaver CC 中 ， 使 用 站 点 窗口 工具 栏 中 的 咏 和 会 按钮 ， 既 可 将 本 地 文件 夹 中 的 文 
件 上 传 到 远程 站 点 ， 也 可 将 远程 站 点 的 文件 下 载 到 本 地 文件 夹 中 。 将 文件 的 上 传 /下 载 操作 和 
存 回 /取出 操作 相 结 合 ， 就 可 以 实现 全 功能 的 站 点 维护 。 具 体操 作 步 又 如 下 。 
EC 选择 【站 点 】 一 【管理 站 点 】 菜 单 命令 ， 打 开 【 管 理 站 点 】 对 话 框 ， 如 图 17-11 
所 示 。 
EEJDy 在 【管理 站 点 】 对 话 框 中 单 击 【 编 辑 】 按 钮 名， 打开 站 点 设置 对 象 对 话 框 ， 如 
图 17-12 所 示 ， 选 择 左 侧 的 【服务 器 】 选 项 。 
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图 17-11 【管理 站 点 】 对 话 框 图 17-12 ”站 点 设置 对 象 对 话 框 


国 于 BY 单 击 右 侧面 板 中 的 珊 按 钮 ， 如 图 17-13 所 示 。 

EGR 在 【服务 器 名 称 】 文 本 框 中 输入 服务 器 的 名 称 ， 在 【连接 方法 】 下 拉 列 表 框 中 
选择 FTP 选项 ， 在 【FTP 地 址 】 文 本 框 中 输入 服务 器 的 地 址 ， 在 【用 户 名 】 和 【 密 
码 】 文 本 框 中 输入 相关 信息 ， 单 击 【 测 试 】 按 钮 ， 可 以 测试 网 络 是 否 连 接 成 功 ， 单 

【保存 】 按 钮 ， 完 成 设置 ， 如 图 17-14 所 示 。 

EGRD) 返回 站 点 设置 对 象 对 话 框 ， 如 图 17-15 所 示 。 

ED 单 击 【 保 存 】 按 钮 ， 完 成 设置 。 返 回 到 【管理 站 点 】 对 话 框 ， 如 图 17-16 所 示 。 

ED 单 击 【完成 】 按 钮 ， 返 回 到 站 点 文件 窗口 。 在 【文件 】 面 板 中 ， 单 击 工具 栏 上 
的 加 按钮 ， 如 图 17-17 所 示 。 

EC 打开 上 传 文件 窗口 ， 在 该 窗口 中 单 击 区 按钮 ， 如 图 17-18 所 示 。 
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图 17-17 【文件 】 面 板 图 17-18 上 传 文件 窗口 
TY 开始 连接 到 “我 的 站 点 ”上 ， 单 击 工具 栏 中 的 团 按 钮 ， 弹 出 一 个 信息 提示 
框 ， 如 图 17-19 所 示 。 
本 于 单 击 【 确 定 】 按 钮 ， 系 统 开 始 上 传 网 站 内 容 ， 如 图 17-20 所 示 。 


Dreamweaver x 
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图 17-19 ”信息 提示 框 图 17-20 ”开始 上 传 文件 


17.3.2 ”案例 5 一 一 使 用 FTP 工具 上 传 网 站 


利用 专门 的 FTP 软件 上 传 网 站 ， 有 具体 操作 步骤 如 下 (本 小 节 以 Cute FTP 9.0 进行 讲解 )。 


EC 打开 FTP 软件 ， 选 择 【 新 建 】 一 【FTP 站 点 】 菜 单 命令 ， 如 图 17-21 所 示 。 
EEIDp 弹出 【此 对 象 的 站 点 属性 : 无 标题 (1)】 对 话 框 ， 如 图 17-22 所 示 。 
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图 17-21 FTP 软件 操作 界面 
ECSRS9 在 【此 对 象 的 站 点 属性 : 无 标题 (1)】 对 话 框 中 根据 提示 输入 相关 信息 ， 单 击 


17-22 【此 对 象 的 站 点 属性 : 


无 标题 (1)】 对 话 框 


【连接 】 按 钮 ， 连 接 到 相应 的 地 址 ， 如 图 17-23 所 示 。 


EC 返回 主 界面 后 ， 切 换 至 【本 地 驱动 器 】 选 项 卡 ， 选 择 要 上 传 的 文件 ， 如 图 17-24 


所 示 。 






































17-23 ”输入 信息 


EECDy 在 窗口 左 侧 选中 需要 上 传 的 文件 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【上载 】 命 
令 ， 如 图 17-25 所 示 。 
EEC 这 时 ， 在 窗口 下 方 将 显示 文件 上 传 的 进度 以 及 上 传 的 状态 ， 如 图 17-26 所 示 ， 上 
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17-24 ”选择 要 上 传 的 文件 


传 完成 后 ， 用 户 即 可 在 外 部 浏览 网 站 信息 了 。 


州 由 由 靳 澶 吕 志 加 一 汀 沪 妇 淹 吕 党 > 汝 记 协 外 外 鲁 
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17-25 ”开始 上 传 文件 图 17-26 上 传 网 站 文件 


17.4 综合 案例 一 一 清理 网 站 中 的 多 余 文 档 


在 Dreamweaver CC 中 ， 可 以 清理 一 些 不 必要 的 HTML， 以 此 提高 网 页 打开 的 速度 ， 清 
理 文档 的 具体 操作 步骤 如 下 。 


1. 清理 不 必要 的 HTML 


EEJDp 选择 【命令 】 一 【清理 XHTML 】 菜 单 命令 ， 弹 出 【清理 HTML/XHTML) 对 
话 框 。 

EECDDy 在 【清理 HTML/XHTML)】 对话 框 中 ， 可 以 设置 对 【 空 标签 区 块 】、【 多 余 的 
嵌 套 标签 】、【Dreamweaver 特殊 标记 】 等 内 容 的 清理 ， 具 体 设置 如 图 17-27 所 示 。 


口 mF Dreamweamerty HTNML ;MN 

口 Dreamweayer 特 取款 记 

Dh 
2 RIESHRE oot 村 短 

[Ed 





17-27 ”清理 不 必要 的 HTML 
EEJSp 设置 完成 后 单 击 【确定 】 按 钮 ， 即 可 完成 对 页 面 指定 内 容 的 清理 。 
2. 清理 Word 生成 的 HTML 


EEC 选择 【命令 】 一 【清理 Word 生成 的 HITML】 菜 单 命令 ， 打 开 【 清 理 Word 生成 
的 HIML】 对 话 框 ， 如 图 17-28 所 示 。 

EC) 在 【基本 】 选 项 卡 中 ， 可 以 设置 要 清理 的 来 自 Word 文档 的 特定 标记 、 背 景 颜 色 
等 选项 ， 在 【详细 】 选 项 卡 中 ， 可 以 进一步 设置 要 清理 的 Word 文档 中 的 特定 标记 以 
及 CSS 样式 表 的 内 容 ， 如 图 17-29 所 示 。 


使 420 


EESp 设置 完成 后 单 击 【确定 】 按 钮 ， 即 可 完成 对 由 Word 生成 的 HTML 的 内 容 的 
清理 。 





尘 理 Word 生成 的 HTML 


出 


























图 17-28 【基本 】 选 项 卡 图 17-29 【详细 】 选 项 卡 


17.5 疑难 解 惑 


疑问 1: 如 何 正确 上 传 文件 ? 

答 : 上 传 网 站 的 文件 需要 遵循 两 个 原则 : 一 是 要 确定 上 传 的 文件 一 定 会 被 网 站 使 用 ， 不 
要 上 传 无 关 紧 要 的 文件 ， 并 尽量 缩小 上 传 文件 的 体积 ， 二 是 上 传 的 图 片 要 尽量 采用 压缩 格 
式 ， 这 不 仅 可 以 节省 服务 器 的 资源 ， 而 且 可 以 提高 网 站 的 访问 速度 。 

疑问 2: 怎样 让 网 页 自动 关闭 ? 

答 : 如 果 希 望 网 页 在 指定 的 时 间 内 能 自动 关闭 ， 可 以 在 网 页 源 代码 的 标签 后 面 加 入 
以 下 代码 : 


<script LANGUAGE="JavaScript"> 
setTimeout ("self.close()",5000) 
</script> 


代码 中 的 5000 表示 5 秒 钟 ， 它 是 以 毫秒 为 单位 的 。 
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第 18 章 
增加 网 站 的 点 击 率 
一 一 网 站 优化 
与 推广 


制作 好 一 个 网 站 后 ， 坐 等 访客 的 光临 是 不 行 的 。 放 在 互联 网 上 的 网 站 就 像 一 块 
立 在 地 下 走道 中 的 公告 牌 一 样 ， 即 使 人 们 在 走道 里 走动 的 次 数 很 多 ， 往 往 也 很 难 发 
现 这 个 公告 牌 ， 可 见 ， 宣 传 网 站 有 多 人 么 重要 。 就 像 任何 产品 一 样 ， 再 优秀 的 网 站 如 
果 不 进行 自我 宣传 ， 也 很 难 有 较 大 的 访问 量 。 
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18.1 网 站 优化 的 方法 与 技巧 


通过 在 网 站 适当 地 添加 广告 信息 ， 可 以 给 网 站 的 拥有 者 带 来 不 小 的 收入 。 随 着 点 击 量 的 
上 升 ， 创 造 的 财富 也 增多 。 


18.1.1 通过 广告 优化 网 站 内 容 


NN 网 站 广告 设计 更 多 的 时 候 是 通过 烦琐 的 工作 与 多 次 尝试 完成 的 。 在 实际 工作 中 ， 网 页 设 
SS 计 者 会 根据 需要 添加 不 同类 型 的 网 站 广告 ， 从 而 优化 网 站 内 容 。 网 站 广告 的 形式 大 致 分 为 以 





下 6 种 。 

1. 网 幅 式 广告 

网 幅 式 广告 又 称 为 旗帜 广告 ， 通 常 横向 出 现在 网 页 中 ， 最 常见 的 尺寸 是 468 像素 x60 像 
素 和 468 像素 x80 像素 ， 目 前 还 有 728 像素 x90 像素 的 大 尺寸 型 ， 是 网 络 广告 比较 早出 现 的 一 
种 广告 形式 。 以 往 网 幅 式 广告 以 JPG 或 者 GIF 格式 为 主 ， 伴 随 着 网 络 的 发 展 ，SWF 格式 的 网 
幅 式 广告 也 比较 常见 了 ， 如 图 18-1 所 示 。 

2. 弹出 式 广告 

弹出 式 广告 是 互联 网 上 的 一 种 在 线 广告 形式 ， 意 图 透 过 广告 来 增加 网 站 流量 。 用 户 进入 
网 页 时 ， 会 自动 开启 一 个 新 的 浏览 器 视窗 ， 以 吸引 读者 直接 到 相关 网 址 浏览 ， 从 而 收 到 宣传 
之 效 。 这 些 广告 一 般 都 透 过 网 页 的 JavaScript 指令 来 启动 ， 但 也 有 通过 其 他 形式 启动 的 。 由 于 
弹出 式 广告 过 分 泛滥 ， 很 多 浏览 器 或 者 浏览 器 组 件 也 加 入 了 弹出 式 窗口 杀手 的 功能 ， 以 屏蔽 
这 样 的 广告 ， 如 图 18-2 所 示 。 


入 放生 
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图 18-1 网 幅 式 广告 图 18-2 弹出 式 广 告 
3. 按钮 式 广告 


按钮 式 广告 是 一 种 小 面积 的 广告 形式 ， 这 种 广告 形式 被 开发 出 来 主要 有 两 个 原因 : 一 方 
面 可 以 通过 减 小 面积 来 降低 购买 成 本 ， 让 小 预算 的 广告 主 能 够 有 能 力 购买 ， 另 一 方面 是 为 了 
更 好 地 利用 网 页 中 面积 比较 小 的 零散 空白 位 。 

常见 的 按钮 式 广告 有 125 像素 x125 像素 、120 像素 x90 像素 、120 像素 x60 像素 、88 像素 x 


二 
令 424 


314 像素 4 种 尺寸 。 在 购买 的 时 候 ， 广 告 主 也 可 以 购买 连续 位 置 的 几 个 按钮 式 广告 组 成 双 按钮 
广告 、 三 按钮 广告 等 ， 以 加 强 宣传 效果 。 按 钮 式 广告 一 般 容量 比较 小 ， 常 见 的 有 JPEG、 
GIF、Flash 等 几 种 格式 ， 如 图 18-3 所 示 。 

4. 文字 链接 广告 


文字 链接 广告 是 一 种 最 简单 、 最 直接 的 网 上 广告 ， 只 需 将 超 链接 加 入 相关 文字 便 可 ， 如 
图 18-4 所 示 。 


纤 体 能 身 死 飞 泳衣 跑步 机 舞 踊 


1 运动 户外 
运 绊 路 株 性 签 球 帆布 4 


© 电脑 客户 端 户外 服 先生 甘 条 照明 过 二 衣 
运 地 喜 装 铺子 POLO 人 昌 业 全 一 豆 达 人 
Down/load 背包 单 肩 包 军 过 帐 这 品牌 授权 措 站 本 1 
耐克 阿迪 361 安 聘 李宁 ERKE 本 
图 18-3 按钮 式 广告 图 18-4 文字 链接 广告 
5. 横幅 式 广告 


横幅 式 广告 是 通栏 式 广告 的 初步 发 展 阶段 ， 初 期 用 户 认 可 程度 很 高 ， 有 不 错 的 效果 。 但 
是 伴随 着 时 间 的 推移 ， 人 们 对 横幅 式 广告 已 经 开始 变 得 麻木 。 于 是 广告 主 和 媒体 开发 了 通栏 
式 广告 ， 它 比 横幅 式 广告 更 长 、 面 积 更 大 ， 更 具有 表现 力 ， 更 吸引 人 。 一 般 的 通栏 式 广告 尺 
寸 有 590 像素 x105 像素 、590 像素 x80 像素 等 ， 已 经 成 为 一 种 常见 的 广告 形式 ， 如 图 18-5 所 示 。 


6. 浮动 式 广告 
浮动 式 广告 是 网 页 页 面 上 悬浮 或 移动 的 非 鼠 标 响 应 广告 ， 形 式 可 以 为 GIF 或 Flash 等 格 
式 ， 如 图 18-6 所 示 。 


手机 冰点 裸 价 


质量 鉴定 无 优 购 机 











图 18-5 横幅 式 广告 图 18-6 浮动 式 广告 


18.1.2 ”通过 搜索 引擎 优化 网 站 
搜索 引擎 优化 (SEO) 是 一 项 技术 性 较 强 的 工作 ， 通 过 搜索 引擎 优化 不 仅 能 让 网 站 在 搜索 引 
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擎 上 有 良好 的 排名 表现 ， 而 且 能 让 整个 网 站 看 上 去 轻松 明快 ， 页 面 高 效 简洁 ， 目 标 客户 能 够 
直 奔 主题 ， 网 站 更 容易 发 挥 沟通 企业 与 客户 的 最 佳 效果 。 

搜索 引擎 优化 从 总 体 技术 而 言 可 以 分 为 两 个 方面 ， 分 别 是 站 内 搜索 引擎 优化 和 站 外 搜索 
引擎 优化 。 


1. 站 内 搜索 引擎 优化 


站 内 搜索 引擎 优化 ， 简 单 地 说 就 是 在 网 站 内 部 进行 搜索 引擎 优化 。 对 网 站 所 有 者 来 说 ， 
站 内 搜索 引擎 优化 是 最 容易 控制 的 部 分 ， 因 为 网 站 是 自己 的 ， 可 以 根据 自己 的 需求 ， 设 定 网 
站 结构 ， 制 作 网 站 内 容 ， 而 且 投入 成 本 可 以 控制 。 

站 内 搜索 引擎 优化 大 体 分 为 以 下 几 部 分 。 

1) “关键 词 策略 

众所周知 ， 在 搜索 引擎 中 检索 信息 都 是 通过 输入 查找 内 容 的 关键 词 或 句子 ， 然 后 由 搜索 
引擎 进行 分 词 在 索引 库 中 查找 来 实现 的 。 因 此 关键 词 在 搜索 引擎 中 的 位 置 至 关 重 要 ， 它 是 整 
个 搜索 过 程 中 最 基本 、 最 重要 的 一 步 ， 也 是 搜索 引擎 优化 中 进行 网 站 优化 、 网 页 优化 的 基础 。 

关键 词 确定 应 考虑 以 下 几 个 因素 : 内 容 相 关 、 主 关键 词 不 可 太 宽 泛 、 主 关键 词 不 要 太 特 
殊 、 站 在 访客 角度 思考 、 选 择 竞争 度 小 搜索 次 数 多 的 关键 词 。 

2) ”域名 优化 

域名 在 网 站 建设 中 拥有 很 重要 的 作用 ， 它 是 联系 网 站 与 网 络 客户 的 纽带 ， 就 好 比 一 个 品 
牌 、 商 标 一 样 拥有 重要 的 识别 作用 ， 所 以 一 个 优秀 的 域名 应 该 能 让 访问 者 轻松 地 记忆 ， 并 且 
快速 地 输入 。 

3) “主机 优化 

主机 是 网 站 建立 必需 的 一 个 环节 。 特 别 是 虚拟 主机 更 需要 进行 优化 ， 通 常 选择 主机 时 考 
虑 以 下 几 点 因素 : 安全 稳定 性 、 连 接 数 、 备 份 机 制 、 自 定义 页 面 、 服 务 等 。 

4) “网 站 结构 优化 

网 站 结构 是 网 站 优化 的 基础 。 在 网 站 结构 优化 的 过 程 中 应 该 注意 以 下 几 点 : 用 户 体验 提 
升 、 权 重 分 配 、 锚 文字 优化 、 网 站 物理 结构 优化 、 内 部 链接 优化 等 。 

5) ”内 容 优 化 

网 站 提供 的 内 容 应 该 具有 独特 性 ， 而 且 是 有 价值 的 ， 它 能 切实 满足 潜在 客户 某 方面 的 需 
求 ， 这 样 的 网 站 内 容 往往 能 获得 潜在 用 户 的 支持 、 信 任 ， 最 终 为 提高 转化 率 加 分 ， 并 逐渐 形 
成 自己 的 权威 品牌 ， 进 入 网 站 良性 发 展 的 轨道 。 因 此 ， 在 对 网 站 内 容 优化 时 ， 应 遵循 坚持 原 
创 、 转 载 有 度 、 杜 绝 伪 原创 等 原则 。 

6) ”内 部 链接 优化 

合理 的 内 部 链接 可 以 极 大 地 提升 网 站 的 优化 效果 ， 对 于 大 型 网 站 更 是 如 此 。 因 此 ， 在 进 
行 网 站 内 部 链接 优化 时 ， 应 该 注意 尊重 用 户 的 体验 、URL 的 唯一 性 、 尽 量 满足 3 次 点 击 原 
则 、 使 用 文字 导航 、 使 用 锚 文 本 等 几 点 。 

7) 页 面 代码 优化 

网 站 结构 的 优化 是 站 在 整个 网 站 的 基础 上 看 问题 ， 而 页 面 优化 是 站 在 具体 页 面 上 看 问 
题 ， 因 为 网 页 是 构成 网 站 的 基本 要 素 ， 只 有 每 个 网 页 都 得 到 较 好 的 优化 ， 才 能 带 来 整个 网 站 








的 优化 成 功 ， 也 才能 带 来 更 多 有 用 的 流量 。 
页 面 代 码 优化 时 通常 考虑 以 下 几 点 : 页 面 布局 的 优化 、 标 签 优化 、 关 键 词 布局 与 密度 、 
代码 优化 、URL 优化 等 。 


2. 站 外 搜索 引擎 优化 


站 外 搜索 引擎 优化 ， 顾 名 思 义 ， 就 是 除 站 内 优化 以 外 其 他 途径 的 优化 方法 ， 也 可 以 说 是 
脱离 站 点 自身 的 搜索 引擎 优化 技术 ， 命 名 源 自 外 部 站 点 对 网 站 在 搜索 引擎 排名 的 影响 。 与 站 
内 优化 相 比 ， 站 外 优化 相对 而 言 更 单一 ， 效 果 也 更 直接 。 缺 点 是 难度 较 大 ， 有 很 多 外 部 因素 
是 超出 站 长 的 直接 控制 的 。 

最 有 用 、 功 能 最 强大 的 外 部 优化 因素 就 是 反 向 链接 ， 即 通常 所 说 的 外 部 链接 ， 如 图 18-7 
所 示 。 


Links to your site 


Domains Total links 
cnrcn 7.570 
xyvtc cn 282 
hnlungcancer com cn 272 
99 com cn 183 


goodjk com 165 





More 


图 18-7 外 部 链接 


互联 网 的 本 质 特征 之 一 就 是 链接 ， 毫 无 疑问 ， 外 部 链接 对 于 一 个 站 点 的 抓 取 、 收 录 、 排 
名 都 起 到 非常 重要 的 作用 。 

实际 上 ， 外 部 链接 表达 的 是 一 种 投票 机 制 ， 也 就 是 网 站 之 间 的 信任 关系 。 比 如 ， 网 站 A 
的 某 个 页 面 中 有 一 个 指向 网 站 B 中 某 个 页 面 的 链接 ， 则 对 搜索 引擎 来 说 ， 网 站 A 的 这 个 页 面 
给 网 站 B 的 页 面 投 一 票 ， 网 站 A 的 页 面 是 信任 网 站 B 的 这 个 页 面 的 。 

搜索 引擎 在 抓 取 互联 网 繁多 页 面 的 基础 上 ， 根 据 网 页 之 间 的 链接 关系 ， 统 计 出 每 个 网 站 
的 每 个 网 页 得 到 的 外 部 链接 投票 数量 ， 从 而 可 以 计算 出 页 面 的 外 部 链接 权重 。 

@ 页 面 得 到 的 外 部 链接 投票 越 多 ， 其 重要 性 就 越 大 ， 外 部 链接 权重 就 越 高 ， 同 等 条 件 
下 关键 词 排 名 就 越 靠 前 。 

@ 页 面 得 到 的 外 部 链接 投票 越 少 ， 其 重要 性 就 越 小 ， 外 部 链接 权重 就 越 低 ， 同 等 条 件 
下 关键 词 排名 就 越 靠 后 。 

因为 搜索 引擎 认为 外 部 链接 是 很 难 被 肆意 操控 的 ， 所 以 目前 的 搜索 引擎 都 将 外 部 链接 的 
权重 作为 主要 的 关键 词 排名 算法 之 一 。 也 正 是 因为 搜索 引擎 的 投票 机 制 ， 所 以 就 导致 外 部 链 
接 在 搜索 引擎 优化 中 起 到 最 重要 的 一 个 作用 ， 就 是 提高 网 页 权重 。 

外 部 链接 经 常 使 用 在 线 工 具 、 新 闻 诱 饵 、 创 意 点 子 、 发 起 炒作 事件 、 幽 默 笑 话 等 方法 。 
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18.2 ”网 站 推广 方法 与 技巧 


网 站 做 好 后 ， 需 要 大 力 宣传 和 推广 ， 只 有 如 此 才能 让 更 多 的 人 知道 并 浏览 。 宣 传 广告 的 
方式 很 多 ， 包 括 利 用 大 众 传媒 、 网 络 传媒 、 电 子 邮 件 、 留 言 本 与 博客 、 在 论坛 中 宣传 。 效 果 
最 明显 的 是 网 络 传媒 的 方式 。 


18.2.1 利用 大 众 传媒 进行 推广 


大 众 传媒 通常 包括 电视 、 书 刊 报纸 、 户 外 广告 以 及 其 他 印刷 品 等 。 
1. 电视 


目前 ， 电 视 是 最 大 的 宣传 媒体 。 如 果 在 电视 中 做 广告 ， 一 定 能 收 到 像 其 他 电视 广告 商品 
一 样 家 喻 户 晓 的 效果 ， 但 对 于 个 人 网 站 而 言 就 不 太 适 合 了 。 

2. 书刊 报纸 

报纸 是 仅 次 于 电视 的 第 二 大 媒体 ， 也 是 使 用 传统 方式 宣传 网 站 的 最 佳 途径 。 作 为 一 名 计 
算 机 爱好 者 ， 在 使 用 软 硬 件 和 上 网 的 过 程 中 ， 通 常 也 积累 了 一 些 值得 与 别人 交流 的 经 验 和 心 
得 ， 那 就 不 妨 将 它 写 出 来 ， 写 好 后 寄 往 像 《 电 脑 爱 好 者 杂志 》 等 比较 著名 的 刊物 ， 从 而 让 更 
多 的 人 受益 。 可 以 在 文章 的 末尾 注 明 自 己 的 主页 地 址 和 E-mail 地 址 ， 或 者 将 一 些 难以 用 书稿 
方式 表达 的 内 容 放 在 自己 的 网 站 中 表达 。 如 果 文 章 很 受 欢 迎 ， 那 么 就 能 吸引 更 多 的 朋友 前 来 
访问 自己 的 网 站 。 

3. 户外 广告 

在 一 些 繁华 、 人 流量 大 的 地 段 的 广告 牌 上 做 广告 也 是 一 种 比较 好 的 宣传 方式 。 目 前 ， 在 街 
头 、 地 铁 内 所 做 的 网 站 广告 就 说 明了 这 一 点 ， 但 这 种 方式 比较 适合 有 实力 的 商业 性 质 的 网 站 。 

4. 其 他 印刷 品 

公司 信 签 、 名 片 、 礼 品 包装 等 都 应 该 印 上 网 址 名 称 ， 让 客户 在 记 住 你 的 名 字 、 职 位 的 同 
时 ， 也 能 看 到 并 记 住 你 的 网 址 。 


18.2.2 ”利用 网 络 媒介 进行 推广 


由 于 网 络 广告 的 对 象 是 网 民 ， 具 有 很 强 的 针对 性 ， 因 此 ， 使 用 网 络 广告 不 失 为 一 种 较 好 
的 宣传 方式 。 

1. 网 络 广告 

在 选择 网 站 做 广告 的 时 候 ， 需 要 注意 以 下 两 点 。 

(1) 应 选择 访问 率 高 的 门户 网 站 ， 只 有 选择 访问 率 高 的 网 站 ， 才 能 达到 “ 广 而 告 之 ”的 
效果 。 

(2) 优秀 的 广告 创意 是 吸引 浏览 者 的 重要 “手段 ”， 要 想 唤起 浏览 者 点 击 的 欲望 ， 就 必 


须 给 浏览 者 点 击 的 理由 。 因 此 ， 图 形 的 整体 设计 、 色 彩 和 图 形 的 动态 设计 以 及 与 网 页 的 搭配 等 
都 是 极其 重要 的 。 图 18-8 所 示 为 天 天 营养 网 首页 ， 在 其 中 就 可 以 看 到 添加 的 网 络 广告 信息 。 


2. 电子 邮件 


这 个 方法 对 自己 熟悉 的 朋友 使 用 比较 有 效 ， 或 者 在 主页 上 提供 更 新 网 站 邮件 订阅 功能 ， 
一 旦 自己 的 网 站 有 更 新 ， 便 可 通知 网 友 了 。 如 果 随 便 地 向 自己 不 认识 的 网 友 发 E-mail 宣传 自 
己 主 页 的 话 ， 就 不 太 友好 了 。 有 些 网 友 会 认为 那 是 垃圾 邮件 ， 以 至 于 给 网 友 留 下 不 好 的 印 
象 ， 并 列 入 黑 名 单 或 拒 收 邮件 列表 内 ， 这 样 对 提高 自己 网 站 的 访问 率 并 无 实质 性 的 帮助 ， 而 
且 若 未 经 别人 同意 就 三 番 五 次 地 发 出 一 样 的 邀请 信 ， 也 是 不 礼貌 的 。 

发 出 的 E-mail 邀请 信 要 有 诚意 ， 态 度 要 和 褒 ， 并 将 自己 网 站 更 新 的 内 容 简 要 地 介绍 给 网 
友 ， 倘 若 网 友 表示 不 愿意 再 收 到 类 似 的 信件 ， 就 不 要 再 将 通知 邮件 寄 给 他 们 了 。 图 18-9 所 示 
为 邮箱 登录 页 面 。 



































oD x 
[BL ee ry ET Tr = -ox 
ZHI) mR) EBV) wth) IR we ee 了 风 呈 通 - 锡 htpy/mai1. 六 ” C || 多 163 网 和 页 邮 中文- x 闫 四 人 人 囊 四 
文件 (各 可 () 宣 看 M] 改 节 夫 (A)， 工具 (帮助 
跟 二 维 码 如 录 Hp8IKSS 录 人 
首页 。 资讯 。 养生 疾病 。 个 作 病 。 亚 角 成 。 辣 并 师 。 孕 要 二 由 适 ， 宅 家 必 备 
i 区 -二 Pei 
ja 士 穿 搭 组 合 [zl eicom | 
红 著 的 热量 这 么 低 ， 为 什么 还 是 会 长 胖 呢 ? Het 
| ame 7 ts ) *as 立即 抢 > [ | 
HE Pe 
| 人 十 天 内 本 录 二 而 了 
Eos, Me | = = 
er ro Fh , NO End, FE GA 版 本 味 U 版 本 ~ 正 册 用 cS 性 洒 
| 
图 18-8 天 天 营养 网 图 18-9 电子 邮件 广告 
3. 留言 板 、 博 客 


处 处 留言 、 引 人 注意 也 是 一 种 很 好 的 宣传 自己 网 站 的 方法 。 当 在 网 上 浏览 看 到 一 个 不 错 
的 网 站 时 ， 可 以 考虑 在 这 个 网 站 的 留言 板 中 留 下 赞美 的 语句 ， 并 把 自己 网 站 的 简介 、 地 址 一 
并 写 下 来 ， 将 来 其 他 朋友 留言 时 看 到 这 些 留言 ， 说 不 定 就 会 有 兴趣 到 你 的 网 站 中 去 参观 
一 下 。 

随 着 网 络 的 发 展 ， 现 在 诞生 了 许多 个 人 博客 ， 在 博客 中 也 可 以 留 下 你 宣传 网 站 的 语句 。 
还 有 一 些 是 商业 网 站 的 留言 板 、 博 客 等 ， 如 网 易 博 客 等 ， 每 天 都 会 有 数 百 人 在 上 面 留言 ， 访 
问 率 较 高 ， 在 那里 留言 对 于 让 别人 知道 自己 网 站 的 效果 会 更 明显 。 图 18-10 所 示 为 网 易 博 客 
的 首页 。 

留言 时 的 用 语 要 真诚 、 简 洁 ， 切 莫 将 与 主题 无 关 的 语句 也 写 在 上 面 。 留 言 篇 幅 要 尽量 简 
短 ， 不 要 将 同一 篇 留言 反复 地 写 在 别人 的 留言 板 上 。 


4. 网 站 论坛 
目前 ， 大 型 的 商业 网 站 中 都 有 多 个 专业 论坛 ， 有 的 个 人 网 站 上 也 有 论坛 ， 那 里 会 有 许多 
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人 在 发 表 观 点 ， 在 论坛 中 留言 也 是 一 种 很 好 的 宣传 网 站 的 方式 。 图 18-11 所 示 为 天 涯 社区 论 
坛 首页 。 
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图 18-10 网易 博 客 图 18-11 天 涯 论坛 


18.2.3 ”利用 其 他 形式 进行 推广 
大 众 媒体 与 网 络 媒体 是 比较 常见 的 网 站 推广 方式 ， 下 面 再 来 介绍 几 种 其 他 推广 方式 。 


1. 注册 搜索 引擎 


在 知名 的 网 站 中 注册 搜索 引擎 ， 可 以 提高 网 站 的 访问 量 。 当 然 ， 很 多 搜索 引擎 (有 些 是 竞 
价 排 名 ) 是 收费 的 ， 这 对 商业 网 站 可 以 使 用 ， 对 个 人 网 站 就 有 点 不 好 接受 了 。 图 18-12 所 示 为 
百度 网 站 的 企业 推广 首页 。 


2. 和 其 他 网 站 交换 链接 


对 于 个 人 网 站 来 说 ， 友 情 链 接 可 能 是 最 好 的 宣传 网 站 的 方式 。 跟 访问 量 大 的 、 优 秀 的 个 
人 网 页 相互 交换 链接 ， 能 大 大 提高 网 页 的 访问 量 。 图 18-13 所 示 为 某 个 网 站 的 友情 链接 区 域 。 
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图 18-12 百度 推广 首页 图 18-13 ”网 站 友情 链接 
这 个 方法 比 参 加 广告 交换 组 织 要 有 效 得 多 ， 起 码 可 以 选择 将 广告 放置 到 哪个 网 页 。 能 


G0 


择 与 那些 访问 率 较 高 的 网 页 建立 友情 链接 ， 这 样 造访 网 页 的 网 友 肯 定 会 多 起 来 。 

友情 链接 是 相互 建立 的 ， 想 要 别人 加 上 自己 网 站 的 链接 ， 就 要 在 自己 网 站 的 首页 或 专门 
做 “友情 链接 ”的 专 页 放置 对 方 的 链接 ， 并 适当 地 进行 推荐 ， 这 样 才能 吸引 更 多 的 人 愿意 与 
你 共 建 链接 。 此 外 ， 网 站 标志 要 制作 得 漂亮 、 醒 目 ， 使 人 一 看 就 有 兴趣 点 击 。 


18.3 ”综合 案例 一 一 查看 网 站 的 流量 


使 用 CNZZ 数据 专家 可 以 查看 网 站 流量 ，CNZZ 数据 专家 是 全 球 最 大 的 中 文 网 站 统计 分 
析 平 台 ， 为 各 类 网 站 提供 免费 、 安 全 、 稳 定 的 流量 统计 系统 与 网 站 数据 服务 ， 帮 助 网 站 创造 
更 大 价值 。 
使 用 CNZZ 数据 专家 查看 网 站 流量 的 具体 操作 步骤 如 下 。 
ET 在 IE 浏览 器 中 输入 网 址 “http://www.cnzz.com/”， 打 开 CNZZ 数据 专家 网 的 主 
页 ， 如 图 18-14 所 示 。 
ED 单 击 【 免 费 注 册 】 按 钮 进行 注册 ， 进 入 创建 用 户 界 面 ， 根 据 提 示 输 入 相关 信 
息 ， 如 图 18-15 所 示 。 
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18-14 ”CNZzZ 数据 专家 网 的 主页 18-15 ”注册 页 面 


EEC 单 击 【 同 意 协议 并 注册 】 按 钮 ， 即 可 注册 成 功 ， 并 进入 【添加 站 点 】 界 面 ， 如 
图 18-16 所 示 。 

ECG 在 【添加 站 点 】 界 面 中 输入 相关 信息 ， 如 图 18-17 所 示 。 

ED 单 击 【确认 添加 站 点 】 按 钮 ， 进 入 【站 点 设置 】 界 面 ， 如 图 18-18 所 示 。 

区 TY 在 【统计 代码 】 界 面 中 单 击 【复制 到 剪贴 板 】 按 钮 ， 根 据 需 要 复制 代码 (此 处 选 
择 “ 站 长 统计 文字 样式 ”)， 如 图 18-19 所 示 。 

ED 将 复制 的 代码 插入 到 页 面 源 代码 中 ， 如 图 18-20 所 示 。 

区 对 BY 保存 并 预览 效果 ， 如 图 18-21 所 示 。 
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18-20 ”添加 代码 到 页 面 源 代码 中 
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图 18-21 预览 网 页 


EDUD) 单 击 【站 长 统计 】 按 钮 ， 进 入 查看 用 户 登录 界面 ， 如 图 18-22 所 示 。 
本 D> 进入 查看 界面 ， 即 可 查看 网 站 的 浏览 量 ， 如 图 18-23 所 示 。 
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图 18-22 查看 用 户 登录 界面 图 18-23 ”网 站 的 浏览 结果 
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18.4 疑难 解 惑 


疑问 1: 如 何 摆 放 网 站 广告 ? 


答 ; 由 于 人 的 眼球 会 因为 阅读 而 产生 疲劳 ， 所 以 在 越 靠近 左上 角 的 位 置 越 能 够 吸引 读者 
的 注意 力 。 这 也 是 为 什么 很 多 网 站 的 Logo 都 是 放 在 左上 角 ， 可 不 要 说 设计 者 都 是 千篇一律 。 
这 样 做 其 实 是 有 好 处 的 ， 在 左上 角 的 Logo 更 加 能 够 让 人 记 住 你 的 网 站 的 “品牌 ”。 

疑问 2: 站 长 如 何 提 高 网 站 收录 率 ? 


答 : 网 站 站 长 可 以 从 3 个 方面 来 提高 网 站 的 收录 率 ， 首 先是 增加 网 络 贱 蛛 (或 候 虫 ) 访 问 网 
站 频率 ; 其 次 要 建立 良好 的 站 内 结构 ; 最 后 要 让 网 络 蜘蛛 知道 网 页 价值 。 
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第 19 章 
打造 坚实 的 堡 双 一 
网 站 安全 与 防御 


网 站 攻击 无 处 不 在 ， 在 某 个 安全 程序 非常 高 的 网 站 ， 攻 击 者 也 许 只 用 小 小 的 一 
行 代码 就 可 以 让 网 站 成 为 入 侵 者 的 帮 上 凶 ， 让 网 站 访问 者 成 了 最 无 辜 的 受害 者 。 
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19.1 网 站 维护 基础 知识 
在 学 习 网 站 安全 与 防御 策略 之 前 ， 用 户 需要 了 解 相关 的 网 站 基础 知识 。 
19.1.1 网 站 的 维护 与 安全 


网 站 安全 的 基础 是 系统 与 平台 的 安全 ， 只 有 在 做 好 系统 平台 的 安全 工作 后 ， 才 能 保证 网 
站 的 安全 。 目 前 ， 随 着 网 站 数量 的 增多 ， 以 及 编写 网 站 代码 的 程序 语言 也 在 不 断 地 更 新 ， 致 
使 网 站 漏洞 层出不穷 ， 黑 客 攻 击 手 段 不 断 变化 ， 让 用 户 防 不 胜 防 。 但 用 户 可 以 以 不 变 应 万 
变 ， 从 以 下 几 个 方面 来 防范 网 站 的 安全 。 

目前 ， 每 个 网 站 的 服务 器 空间 并 不 都 是 自己 的 ， 因 为 一 些小 的 公司 没有 经 济 实力 购买 自 
己 的 服务 器 ， 他 们 只 能 去 租 别人 的 服务 器 ， 所 以 对 于 在 不 同 地 方 的 网 站 服务 器 空间 ， 其 网 站 
防范 措施 也 不 尽 相同 。 


1. 网 站 服务 空间 是 租用 的 


针对 这 种 情况 ， 网 站 管理 员 只 能 在 保护 网 站 的 安全 方面 下 功夫 ， 即 在 网 站 开发 方面 做 一 
些 安全 维护 的 工作 。 

(1) 网 站 数据 库 的 安全 。 一 般 SQL 注入 攻击 主要 是 针对 网 站 数据 库 的 ， 所 以 需要 在 数据 
库 连 接 文件 中 添加 相应 防 攻击 的 代码 。 比 如 在 检查 网 站 程序 时 ， 打 开 那 些 含有 数据 库 操作 的 
ASP 文件 ， 这 些 文件 是 需要 防护 的 页 面 ， 然 后 在 其 头 部 加 上 相关 的 防 注 入 代码 ， 于 是 这 些 页 
面 就 能 防 注 了 ， 最 后 再 把 它们 都 上 传 到 服务 器 上 。 

(2) 堵 住 数 据 库 下 载 漏洞 ， 换 句 话说 就 是 不 让 别人 下 载 数据 库 文件 ， 并 且 数 据 库 文件 的 
命名 最 好 复杂 些 并 隐藏 起 来 ， 让 别人 认 不 出 来 。 有 关 如 何 防范 数据 库 下 载 漏洞 的 知识 ， 将 在 
下 一 节 进 行 详 细 介绍 。 

(3) 网 站 中 最 好 不 要 有 上 传 和 论坛 程序 ， 因 为 这 样 最 容易 产生 上 传 文件 漏洞 以 及 其 他 的 
网 站 漏洞 ， 关 于 这 一 点 笔者 在 网 站 漏洞 分 析 章 节 已 经 做 了 详细 的 介绍 ， 这 里 不 再 重 述 。 

(4) 对 于 后 台 管理 程序 的 要 求 是 ， 首 先 不 要 在 网 页 上 显示 后 台 管 理 程序 的 入 口 链接 ， 防 
止 黑客 攻击 ;其 次 用 户 名 和 密码 不 能 过 于 简单 且 要 定期 更 换 。 

(5) 定期 检查 网 站 上 的 木马 ， 使 用 某 些 专门 木马 查 杀 工具 ， 或 使 用 网 站 程序 集成 的 监测 
工具 定期 检查 网 站 上 是 否 存在 木马 。 另 外 ， 还 可 以 把 网 站 上 除了 数据 库 文件 外 的 文件 ， 都 改 
成 只 读 的 属性 ， 以 防止 文件 被 窜改 。 


2. 网 站 服务 空间 是 自己 的 


针对 这 种 情况 ， 除 了 采用 上 述 几 点 对 网 站 安全 进行 防范 外 ， 还 要 对 网 站 服务 器 的 安全 进 
行 防范 。 这 里 以 Windows+IIS 实现 的 平台 为 例 ， 需 要 做 到 以 下 几 点 。 

(1) 服务 器 的 文件 存储 系统 要 使 用 NTFS 文件 系统 ， 因 为 在 对 文件 和 目录 进行 管理 方 
面 ，NTFS 系统 更 安全 有 效 。 

(2) 关闭 默认 的 共享 文件 。 





(3) 建立 相应 的 权限 机 制 ， 让 权限 分 配 以 最 小 化 权限 的 原则 分 配给 Web 服务 器 访问 者 。 

(4) 删除 不 必要 的 虚拟 目录 、 和 危险 的 IS 组 件 和 不 必要 的 应 用 程序 映射 。 

(5) 保护 好 日 志文 件 的 安全 。 因 为 日 志文 件 是 系统 安全 策略 的 一 个 重要 环节 ， 可 以 通过 
对 日 志 的 查看 ， 及 时 发 现 并 解决 问题 ， 确 保 日 志文 件 的 安全 能 有 效 提高 系统 整体 的 安全 性 。 


19.1.2 ”常见 的 网 站 攻击 方式 


网 站 攻击 的 手段 极其 多 样 ， 黑 客 常用 的 网 站 攻击 手段 主要 有 以 下 几 种 。 
1. 阻塞 攻击 


阻塞 类 攻击 手段 的 典型 攻击 方法 是 拒绝 服务 攻击 (Denial of Service，DoS)。 该 方法 是 一 类 
个 人 或 多 人 利用 网 络 协议 组 的 某 些 工 具 ， 拒 绝 合法 用 户 对 目标 系统 (如 服务 器 等 ) 或 信息 访问 。 
攻击 成 功 的 后 果 为 使 目标 系统 死机 、 使 端口 处 于 停顿 状态 等 ， 还 可 以 在 网 站 服务 器 中 发 送 杂 
乱 信 息 、 改 变 文件 名 称 、 删 除 关键 的 程序 文件 等 ， 进 而 扭曲 系统 的 资源 状态 ， 使 系统 的 处 理 
速度 降低 。 


2. 文件 上 传 漏洞 攻击 


网 站 的 上 传 漏洞 根据 在 网 页 文件 上 传 的 过 程 中 ， 对 其 上 传 变量 处 理 方式 的 不 同 ， 可 分 为 
动 网 型 和 动力 型 两 种 。 其 中 ， 动 网 型 上 传 漏洞 是 编程 人 员 在 编写 网 页 时 ， 未 对 文件 上 传 路 径 
变量 进行 任何 过 滤 就 进行 了 上 传 ， 从 而 产生 了 漏洞 ， 以 致 用 户 可 以 对 文件 上 传 路 径 变量 进行 
任意 修改 。 动 网 型 上 传 漏洞 最 早出 现在 动 网 论坛 中 ， 其 危害 性 极 大 ， 使 很 多 网 站 都 遭受 攻 
击 。 而 动力 型 上 传 漏洞 是 因为 网 站 系统 没有 对 上 传 变量 进行 初始 化 ， 在 处 理 多 个 文件 上 传 
时 ， 可 以 将 ASP 文件 上 传 到 网 站 目录 中 所 产生 的 漏洞 。 

上 传 漏洞 攻击 方式 对 网 站 安全 威胁 极 大 ， 攻 击 者 可 以 直接 上 传 如 ASP 木马 文件 而 得 到 一 
个 WebShell， 进 而 控制 整个 网 站 服务 器 。 


3. 跨 站 脚本 攻击 


跨 站 脚本 攻击 一 般 是 指 黑客 在 远程 站 点 页 面 HTML 代码 中 插入 具有 恶意 目的 的 数据 。 用 
户 认为 该 页 面 是 可 信赖 的 ， 但 当 浏览 器 下 载 该 页 面 时， 嵌入 其 中 的 脚本 将 被 解释 执行 。 跨 站 
脚本 攻击 方式 最 常见 的 ， 如 通过 窃取 Cookie， 或 通过 欺骗 使 用 户 打开 木马 网 页 ， 或 直接 在 存 
在 跨 站 脚本 漏洞 的 网 站 中 写 入 注入 脚本 代码 ， 在 网 站 挂 上 木马 网 页 等 。 


4. 弱 密码 的 入 侵 攻击 


这 种 攻击 方式 首先 需要 用 扫描 器 探测 到 SQL 账号 和 密码 信息 ， 进 而 拿 到 SA 的 密码 ， 然 
后 用 SQLEXEC 等 攻击 工具 通过 1433 端口 连接 到 网 站 服务 器 上 ， 再 开设 系统 账号 ， 通 过 3389 
端口 登录 。 这 种 攻击 方式 还 可 以 配合 WebShell 来 使 用 。 一 般 的 ASP+MSSQL 网 站 通常 会 把 
MSSQL 连接 密码 写 到 一 个 配置 文件 中 ， 用 WebShell 来 读 取 配置 文件 里 面 的 SA 密码 ， 然 后 
再 上 传 一 个 SQL 木马 来 获取 系统 的 控制 权限 。 
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5. 网 站 旁 注入 侵 


这 种 技术 是 通过 IP 绑 定 域名 查询 的 功能 ， 先 查 出 服务 器 上 有 多 少 网 站 ， 再 通过 一 些 薄 弱 
的 网 站 实施 入 侵 ， 拿 到 权限 之 后 转 而 控制 服务 器 的 其 他 网 站 。 


6. 网 站 服务 器 漏洞 攻击 


网 站 服务 器 的 漏洞 主要 集中 在 各 种 网 页 中 。 由 于 网 页 程序 编写 得 不 严谨 ， 从 而 出 现 了 各 
种 脚本 漏洞 ， 如 动 网 文件 上 传 漏洞 、Cookie 欺骗 漏洞 等 都 属于 脚本 漏洞 。 但 除了 这 几 类 常见 
的 脚本 漏洞 外 ， 还 有 一 些 专门 针对 某 些 网 站 程序 出 现 的 脚本 程序 漏洞 ， 比 如 用 户 对 输入 的 数 
据 过 滤 不 严 、 网 站 源 代码 暴露 以 及 远程 文件 包含 漏洞 等 。 

对 这 些 漏洞 的 攻击 ， 攻 击 者 需要 有 一 定 的 编程 基础 。 现 在 网 络 上 随时 都 有 最 新 的 脚本 漏 
洞 发 布 ， 也 有 专门 的 工具 ， 初 学 者 完全 可 以 利用 这 些 工具 进行 攻击 。 


19.2 ”网 站 安全 防御 策略 
在 了 解 了 网 站 安全 基础 知识 后 ， 下 面 介绍 网 站 安全 防御 策略 。 


19.2.1 网 站 硬件 的 安全 维护 


硬件 中 最 主要 的 就 是 服务 器 ， 一 般 要 求 使 用 专用 的 服务 器 ， 不 要 使 用 PC 代替 。 因 为 专用 
的 服务 器 中 有 多 个 CPU， 并 且 硬 盘 各 方面 的 配置 也 比较 优秀 ， 如 果 其 中 一 个 CPU 或 硬盘 坏 
了 ， 别 的 CPU 和 硬盘 还 可 以 继续 工作 ， 不 会 影响 到 网 站 的 正常 运行 。 

网 站 机 房 通常 要 注意 室内 的 温度 、 湿 度 及 通风 性 ， 这 些 将 影响 到 服务 器 的 散热 和 性 能 的 
正常 发 挥 。 如 果 有 条 件 ， 最 好 使 用 两 台 或 两 台 以 上 的 服务 器 ， 所 有 的 配置 最 好 都 是 一 样 的 ， 
因为 服务 器 经 过 一 段 时 间 要 进行 停机 检修 ， 在 检修 的 时 候 可 以 运行 别 的 服务 器 工作 ， 这 样 不 
会 影响 到 网 站 的 正常 运行 。 图 19-1 所 示 为 网 站 服务 器 的 工作 环境 。 





19-1 网 站 服务 器 工作 环境 


19.2.2 ”网 站 软件 的 安全 维护 


软件 管理 也 是 确保 一 个 网 站 能 够 良好 运行 的 必要 条 件 ， 通 常 包 括 服务 器 的 操作 系统 配 
置 、 网 站 的 定期 更 新 、 数 据 的 备份 以 及 网 络 安全 的 防护 等 。 

1) “服务 器 的 操作 系统 配置 

一 个 网 站 要 能 正常 运行 ， 硬 件 环境 是 一 个 先决 条 件 。 但 是 服务 器 操作 系统 的 配置 是 否 可 
行 和 设置 的 优良 性 如 何 ， 则 是 一 个 网 站 能 否 良 好 长 期 运行 的 保证 。 除 了 要 定期 对 这 些 操作 系 
统 进行 维护 外 ， 还 要 定期 对 操作 系统 进行 更 新 ， 并 使 用 最 先进 的 操作 系统 。 

2) ”网 站 的 定期 更 新 

网 站 的 创建 并 不 是 一 成 不 变 的 ， 还 要 对 网 站 进行 定期 的 更 新 。 除 了 更 新 网 站 的 信息 外 
还 要 更 新 或 调整 网 站 的 功能 和 服务 。 对 网 站 中 的 废旧 文件 要 随时 清除 ， 以 提高 网 站 的 精良 
性 ， 从 而 提高 网 站 的 运行 速度 。 还 有 就 是 要 时 时 关注 互联 网 的 发 展 趋势 ， 随 时 调整 自己 的 网 
站 ， 使 其 顺应 潮流 ， 以 便 给 别人 提供 更 便捷 和 贴切 的 服务 。 

3) 数据 的 备份 

数据 的 备份 就 是 对 自己 网 站 中 的 数据 进行 定期 备份 ， 这 样 既 可 以 防止 服务 器 出 现 突 发 错 
误 丢失 数据 ， 又 可 以 防止 自己 的 网 站 被 别人 “ 黑 ” 掉 。 如 果 有 了 定期 的 网 站 数据 备份 ， 那 么 
即使 自己 的 网 站 被 别人 “ 黑 ” 掉 了 ， 也 不 会 影响 网 站 的 正常 运行 。 

4) 网 络 安全 的 防护 

网 络 的 安全 防护 就 是 防止 自己 的 网 站 被 别人 非法 地 侵入 和 破坏 。 除 了 要 对 服务 器 进行 安 
全 设置 外 ， 首 要 的 一 点 是 要 注意 及 时 下 载 和 安装 软件 的 补丁 程序 。 另 外 ， 还 要 在 服务 器 中 安 
装 、 设 置 防火 墙 。 防 火 墙 虽然 是 确保 安全 的 一 个 有 效 措施 ， 但 不 是 唯一 的 ， 也 不 能 确保 绝对 
安全 。 为 此 ， 还 应 该 使 用 其 他 的 安全 措施 。 

另外 一 点 就 是 要 时 刻 注意 病毒 的 问题 ， 要 时 刻 对 自己 的 服务 器 进行 查 毒 、 杀 毒 等 操作 ， 
以 确保 系统 的 安全 运行 。 图 19-2 所 示 为 360 杀毒 软件 的 下 载 页 面 。 下 载 之 后 ， 将 其 安装 到 网 
站 服务 器 之 中 ， 就 可 以 使 用 该 软件 保护 系统 安全 了 。 
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图 19-2 ”360 杀毒 软件 下 载 页 面 
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19.2.3 ”检测 网 站 的 安全 性 


360 网 站 安全 检测 平台 为 网 站 管理 者 提供 了 网 站 漏洞 检测 、 网 站 挂 马 实时 监控 、 网 站 帘 改 
实时 监控 等 服务 。 


使 用 360 网 站 安全 检测 平台 检测 网 站 安全 的 操作 步骤 如 下 。 

国友 在 IE 浏览 器 中 输入 360 网 站 安全 检测 平台 的 网 址 http://webscan.360.cn/， 打 开 
360 网 站 安全 的 首页 ， 在 首页 中 输入 要 检测 的 网 站 地 址 ， 如 图 19-3 所 示 。 

国 了 ZY 单 击 【 检 测 一 下 】 按 钮 ， 即 可 开始 对 网 站 进行 安全 检测 ， 并 给 出 检测 的 结果 ， 





如 图 19-4 所 示 。 
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图 19-3 ”360 网 站 安全 检测 页 面 图 19-4 网 站 安全 检测 结果 

如 果 检 测 出 网 站 存在 安全 漏洞 ， 就 会 给 出 相应 的 评分 ， 然 后 单 击 【我 要 更 新 安全 得 分 】 
按钮 ， 就 会 进入 360 网 站 安全 修复 界面 ， 在 对 站 长 权限 进行 验证 后 ， 就 可 以 修复 网 站 安全 漏 
洞 了 ， 如 图 19-5 所 示 。 











19-5 ”网 站 安全 修复 界面 


19.3 ”综合 案例 一 一 设置 网 站 的 访问 权限 
限制 用 户 的 网 站 访问 权限 往往 可 以 有 效 堵 住 入 侵 者 的 上 传 ， 设 置 网 站 访问 权限 的 具体 操 
作 步 骤 如 下 。 
EC 在 资源 管理 器 中 右 击 Di\inetpub 中 的 www.***.com 目录 ， 在 弹出 的 快捷 菜单 中 
选择 【属性 】 命 令 ， 在 打开 的 对 话 框 中 切换 到 【安全 】 选 项 卡 ， 如 图 19-6 所 示 。 
EEJ29 在 【组 或 用 户 名 】 列 表 框 中 选择 任意 一 个 用 户 名 ， 然 后 单 击 【编辑 】 按 钮 ， 打 
开 权 限 对 话 框 ， 如 图 19-7 所 示 。 
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图 19-6 【安全 】 选 项 卡 图 19-7 权限 对 话 框 


EEJe 单 击 【 添 加 】 按 钮 ， 打 开 【 选 择 用 户 或 组 】 对 话 框 ， 在 其 中 输入 用 户 名 
Everyone， 如 图 19-8 所 示 。 

加 YY 单 击 【 确 定 】 按 钮 ， 返 回 文件 夹 权限 对 话 框 中 ， 可 看 到 已 将 Everyone 用 户 添加 
到 列表 中 。 在 权限 列表 框 中 选择 【 读 取 和 执行 】、【 列 出 文件 夹 目 录 】、【 读 取 】 
权限 后 ， 单 击 【 确 定 】 按 钮 ， 即 可 完成 设置 ， 如 图 19-9 所 示 。 
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图 19-8 【选择 用 户 或 组 】 对 话 框 图 19-9 文件 夹 权限 对 话 框 
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另外 ， 在 网 页 文件 夹 中 还 有 数据 库 文件 的 权限 设置 需要 进行 特别 设置 。 因 为 用 户 在 提交 
表单 或 注册 等 操作 时 ， 会 修改 到 数据 库 的 数据 ， 所 以 除了 给 用 户 读 取 的 权限 外 ， 还 需要 写 入 
和 修改 权限 ; 否则 也 会 出 现 用 户 无 法 正常 访问 网 站 的 问题 。 

设置 网 页 数据 库 文件 权限 的 操作 方法 如 下 : 右 击 文件 夹 中 的 数据 库 文件 ， 在 弹出 的 快捷 
菜单 中 选择 【 属性】 命令， 在 打开 的 属性 对 话 框 中 切换 到 【安全 】 选 项 卡 ， 在 【组 或 用 户 
名 】 列 表 框 中 选择 Everyone 用 户 ， 在 权限 列表 中 再 选择 【修改 】、【 写 入 】 权 限 。 


19.4 疑难 解 惑 


疑问 1: 网 站 为 什么 容易 被 攻击 ? 


答 : 每 一 个 站 长 都 不 希望 自己 的 网 站 被 攻击 ， 因 此 就 需要 防 患 于 未 然 ， 找 出 被 攻击 的 原 
因 ， 减 少 麻烦 。 站 长 可 以 从 注入 漏洞 、 跨 站 脚本 (XSS)、 恶 意 文件 执行 、 不 安全 的 直接 对 象 参 
照 物 、 跨 站 指令 伪造 、 信 息 泄露 和 错误 处 理 不 当 、 不 安全 的 认证 和 会 话 管理 、 不 安全 的 加 密 
存储 设备 、 不 安全 的 通信 、 未 对 网 站 地 址 的 访问 进行 限制 等 方面 来 找 被 攻击 的 原因 ， 找 到 之 
后 ， 进 行 有 针对 性 的 修复 ， 才 能 减少 被 攻击 。 


疑问 2: 如 何 检测 我 的 网 站 服务 器 是 否 被 黑 ? 


答 : 网 站 的 服务 器 被 黑 之 后 ， 系 统 肯定 会 出 现 运 行 速度 变 慢 、 系 统 账 号 异常 等 现象 ， 这 
时 网 站 管理 者 可 以 从 以 下 几 个 方面 来 检测 。 

(1) 检查 服务 器 上 防护 软件 是 否 有 异常 日 志 ， 如 服务 器 安全 狗 系统 账号 扫描 是 否 有 影子 
账号 、 防 护 日 志 是 否 有 异常 拦截 记录 。 

(2) 检查 【控制 面板 】 一 【管理 工具 】 一 【事件 查看 器 】 里 面 日 志 是 否 正 常 。 

(3) 检查 任务 栏 管理 里 面 服务 和 进程 是 否 异常 ， 是 否 有 病毒 或 者 后 门 程序 。 

(4) 检查 网 站 是 否 挂 马 或 者 页 面 文 件 被 葵 换 。 

(5) 检查 系统 账号 是 否 异常 ， 有 无 增加 账号 或 者 修改 密码 。 

(6) 检查 防火 墙 和 其 他 系统 设置 是 否 异常 ， 是 否 被 其 他 人 修改 过 。 

(7) 检查 系统 服务 器 启动 项 是 否 有 异常 程序 。 

(8) 检查 服务 器 端口 是 否 异常 。 


